初识SFDC创建一个google map（添加了marker小图标让他可以去到你输入的经纬度上）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识SFDC创建一个google map（添加了marker小图标让他可以去到你输入的经纬度上）相关的知识，希望对你有一定的参考价值。
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 9 lat = document.getElementById("{!$Component.form.pageBlock1.text1}").value; 10 11 12 lng = document.getElementById("{!$Component.form.pageBlock1.text2}").value; 13 14 var myLatLng = new google.maps.LatLng(lat, lng); 15 var myOptions = { 16 zoom: 15, 17 center: myLatLng, 18 mapTypeId: google.maps.MapTypeId.ROADMAP 19 }; 20 var map = new google.maps.Map(document.getElementById("map"), myOptions); 21 22 var marker = new google.maps.Marker({ 23 position: myLatLng, 24 draggable: true 25 }); 26 marker.setMap(map); 27 28 var win2 = null; 29 //添加了侦听每次移动都会生成新的win1，但是会重叠覆盖； 30 google.maps.event.addListener(marker, ‘dragend‘, function() { 31 var win1 = new google.maps.InfoWindow({ 32 content: "経度:" + marker.position.lat() + " " + "緯度:" + marker.position.lng() 33 }); 34 win1.open(map, marker); 35 //每次都关闭上一个就不会有重复了； 36 if(win2) { 37 win2.close(); 38 } 39 win2 = win1; 40 }); 41 } 42 window.onload = myLoad; 43 </script> 44 </head> 45 <body> 46 <style> 47 #map { 48 width: 500px; 49 height: 400px; 50 float: left; 51 } 52 </style> 53 <div id="map"></div> 54 <apex:form id="form"> 55 <apex:pageBlock id="pageBlock1"> 56 <apex:inputText id="text1"/> 57 <apex:inputText id="text2"/> 58 <apex:pageBlockButtons > 59 <apex:commandButton onclick="myLoad()" value="change"/> 60 </apex:pageBlockButtons> 61 </apex:pageBlock> 62 <apex:pageBlock > 63 64 65 </apex:pageBlock> 66 67 </apex:form> 68 </body> 69 </apex:page>
其实就是这两句话啦。在下面添加两个 apex:inputText输入框，设置上ID然后后通过{!$Component.form.pageBlock1.text1}每一级的ID获取，就可以获取到你输入的地址然后定位了。
lat = document.getElementById("{!$Component.form.pageBlock1.text1}").value; 10 11 12 lng = document.getElementById("{!$Component.form.pageBlock1.text2}").value;
本列要注意的地方有很多
1，必须用IE浏览器打开WIN10的不好用；
2，我原来获取ID的时候是在浏览器页面按F12，然后选择你要的组件，它就会告诉你ID。好处是不需要自己手动的给每一级都添加ID，缺点也很明显就是每次只要你改动<body></body>里面的内容，id就会改变，每次都要重新获取，直到我看见了别人这么写才…………
3，就是上一个例子里提到的
marker.position.lat()
marker.position.lng()这两个方法，草鸡好用，直接帮获取到经纬度。
4，这是我最无语错误，由于本例刚刚加载完毕的时候，是没有输入经纬度的，所以它有一个默认的地址，是在海上……在海上……海上……以至于我以为一直没有加载出来，直到我师傅过来拨了拨我的鼠标滚轮（缩放）然后才看见其他的东西，
5，就是其实可以不用添加button组件的，只要输入新的经纬度，enter就可以跳转，这个很神奇为什么enter的时候inputText里面的东西没被清空，被保留了呢？求教！！！
以上是关于初识SFDC创建一个google map（添加了marker小图标让他可以去到你输入的经纬度上）的主要内容，如果未能解决你的问题，请参考以下文章
初识SFDC创建一个google map（添加了marker小图标上的小框框InfoWindow可变更文字）