初识SFDC创建一个google map(添加了marker小图标上的小框框InfoWindow可变更文字)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识SFDC创建一个google map(添加了marker小图标上的小框框InfoWindow可变更文字)相关的知识,希望对你有一定的参考价值。

 1 <apex:page >
 2     <head>
 3         <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 4         <script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></script>
 5         <script type="text/javascript">
 6             function myLoad() { 
 7 
 8                 var lat = 23.14746;
 9                 var lng = 113.34175376;
10                 
11                     var myLatLng = new google.maps.LatLng(lat, lng);
12                 var myOptions = {
13                     zoom: 15,
14                     center: myLatLng,                    
15                     mapTypeId: google.maps.MapTypeId.ROADMAP
16                 };
17                 var map = new google.maps.Map(document.getElementById("map"), myOptions);
18           
19                 var marker = new google.maps.Marker({
20                       position: myLatLng,
21                       draggable: true
22                   });
23                   marker.setMap(map);
24                   
25                   var win2 = null;
26                   //添加了侦听每次移动都会生成新的win1,但是会重叠覆盖;
27                 google.maps.event.addListener(marker, ‘dragend‘, function() {
28                     var win1 = new google.maps.InfoWindow({
29                             content: "経度:" + marker.position.lat() + " " + "緯度:" + marker.position.lng()
30                       });
31                     win1.open(map, marker);
32                     //每次都关闭上一个就不会有重复了;
33                     if(win2) {
34                         win2.close();
35                     }    //给当前的infoWindow重新命名了;
36                         win2 = win1;
37                 });
38             }
39             window.onload = myLoad;
40         </script>    
41     </head>
42     <body>
43         <style>
44               #map {
45                 width: 500px;
46                 height: 400px;
47                 float: left;
48               }
49           </style>
50           <div id="map"></div>
51     </body>
52 </apex:page>

就是给marker图标添加一个侦听

google.maps.event.addListener(marker, ‘dragend‘, function() 
也可以‘dragstart‘每次移动结束时候关闭上一个
InfoWindow开启一个新的InfoWindow 再调用里面的lat();lng();方法,所以每次都获取新的经纬度;
这两个方法非常重要;
说到重要,还有一件事比较重要,必须用IE才能看到效果;

以上是关于初识SFDC创建一个google map(添加了marker小图标上的小框框InfoWindow可变更文字)的主要内容,如果未能解决你的问题,请参考以下文章

初识SFDC创建一个google map(添加了marker小图标上的小框框InfoWindow可变更文字)

初识SFDC创建一个google map(添加了marker小图标让他可以去到你输入的经纬度上)

初识SFDC创建一个google map(最基础版本)

SFDC 10 google定位

12,SFDC 管理员篇 - 页面配置

google maps js v3 api教程 -- 在地图上添加标记