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里面的东西没被清空，被保留了呢？求教！！！
时间： 2024-08-10 15:09:03