初识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可变更文字)