初识SFDC创建一个google map（添加了marker小图标上的小框框InfoWindow）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识SFDC创建一个google map（添加了marker小图标上的小框框InfoWindow）相关的知识，希望对你有一定的参考价值。
重要的事情还是要强调一下必须用IE浏览器才能打开
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 //给marker标记加上自定义内容 7 function myLoad() { 8 9 var lat = 23.14746; 10 var lng = 113.34175376; 11 12 var myLatLng = new google.maps.LatLng(lat, lng); 13 var myOptions = { 14 zoom: 15, 15 center: myLatLng, 16 mapTypeId: google.maps.MapTypeId.ROADMAP 17 }; 18 var map = new google.maps.Map(document.getElementById("map"), myOptions); 19 20 //创建marker 21 var marker = new google.maps.Marker({ 22 position: myLatLng, 23 draggable: true 24 }); 25 marker.setMap(map); 26 27 //创建InfoWindow自定义内容 28 var infowindow = new google.maps.InfoWindow({ 29 //自定义内容 30 //本例中经度纬度都是固定写死的所以不会随着图标的改变而变化 31 content: "经度:" + marker.position.lat() + " " + "纬度:" + marker.position.lng() 32 }); 33 infowindow.open(map, marker); 34 35 } 36 window.onload = myLoad; 37 </script> 38 </head> 39 <body> 40 <style> 41 #map { 42 width: 500px; 43 height: 400px; 44 float: left; 45 } 46 </style> 47 <div id="map"></div> 48 </body> 49 </apex:page>
本列就没有设置marker的格式，调用的是默认的图标。因为本来讲的就是infoWindow
在介绍marker的时候有一个很重要的属性忘了说了。
//创建marker 21 var marker = new google.maps.Marker({ 22 position: myLatLng, 23 draggable: true 24 });
就是这个draggable:boolean
是否可以拖动。这个属性很重要，因为下面会用到。
//创建InfoWindow自定义内容
28 var infowindow = new google.maps.InfoWindow({
29 //自定义内容
30 //本例中经度纬度都是固定写死的所以不会随着图标的改变而变化
31 content: "经度:" + marker.position.lat() + " " + "纬度:" + marker.position.lng()
32 });
33 infowindow.open(map, marker);
这就是创建一个infowindow的最简单的步骤。
content就是infowindow里面要显示的内容，本例content里面的内容不会随着
infowindow和marker的移动而改变，不是因为
marker.position.lat();
marker.position.lng();
这两个方法不好用而是这两个方法在一开始的时候执行了一次，之后就没被再调用执行，所以显示的内容是固定的；
下一篇写一个可以变更的。
以上是关于初识SFDC创建一个google map（添加了marker小图标上的小框框InfoWindow）的主要内容，如果未能解决你的问题，请参考以下文章
初识SFDC创建一个google map（添加了marker小图标上的小框框InfoWindow可变更文字）