高德地图 – 1.问题集锦

 

1.自动加载文本框的坐标，并在地图标注点。

2.点击地图时，并且“逆地理编码”解析出地址方在文本框

 

js

1. var lnglatXY;  
2. var marker;  
3.   
4. //初始化地图对象，加载地图  
5. var map = new AMap.Map('mapContainer', {  
6.     resizeEnable: true,  
7.     view: new AMap.View2D({  
8.         center: new AMap.LngLat(106.461983, 29.516409),  
9.         zoom: 10,  
10.     })  
11. });  
12.   
13.   
14. //加点  
15. marker = new AMap.Marker({  
16.     icon: "http://webapi.amap.com/images/marker_sprite.png",  
17.     position: new AMap.LngLat($("#EditFormMap input[name='longitude']").val(), $("#EditFormMap input[name='latitude']").val())  
18. });  
19.   
20. //uncaught exception: Invalid Object: Pixel(NaN, NaN)  
21. //这里报这个错误，是因为不能读取到$("#EditFormMap input[name='longitude']").val(), $("#EditFormMap input[name='latitude']").val() 的值  
22. //因为要在本页点【地图】按钮，才会赋值。所以该注销掉  
23. //marker.setMap(map);  //在地图上添加点  
24.   
25.   
26.   
27. AMap.event.addListener(map, 'click', getLnglat);  
28.   
29.   
30. //鼠标在地图上点击，获取经纬度坐标  
31. function getLnglat(e) {  
32.     map.clearMap(); //删除地图上的所有覆盖物  
33.   
34.     //经度赋值  
35.     document.getElementsByName('longitude').value = e.lnglat.getLng();  
36.     $("#EditFormMap input[name='longitude']").attr("value", e.lnglat.getLng())  
37.     //纬度赋值  
38.     document.getElementsByName('latitude').value = e.lnglat.getLat();  
39.     $("#EditFormMap input[name='latitude']").attr("value", e.lnglat.getLat());  
40.   
41.     //逆地址编码需要的 X,Y  
42.     lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());  
43.     geocoder();  
44. }  
45.   
46. function geocoder() {  
47.     var MGeocoder;  
48.     //加载地理编码插件  
49.     map.plugin(["AMap.Geocoder"], function () {  
50.         MGeocoder = new AMap.Geocoder({  
51.             radius: 1000,  
52.             extensions: "all"  
53.         });  
54.         //返回地理编码结果   
55.         AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack);  
56.         //逆地理编码  
57.         MGeocoder.getAddress(lnglatXY);  
58.     });  
59.   
60.     //加点  
61.     marker = new AMap.Marker({  
62.         icon: "http://webapi.amap.com/images/marker_sprite.png",  
63.         position: lnglatXY,  
64.   
65.     });  
66.   
67.     marker.setMap(map);  //在地图上添加点  
68.   
69.     //map.setFitView(); //缩放平移地图到合适的视野级别，  
70.   
71. }  
72.   
73. //回调函数  
74. function geocoder_CallBack(data) {  
75.   
76.     var address;  
77.     //返回地址描述  
78.     address = data.regeocode.formattedAddress;  
79.     //console.info($("#EditFormMap input[name='address']"))  
80.     //返回结果赋值（地址栏）  
81.     //$("#EditFormMap input[name='address']").attr("value", address);  
82.     $("#EditFormMap input[name='address']").attr("value", address);  
83. }  

 

html

1. <tr>  
2.     <th align="right">经度：</th>  
3.     <td>  
4.         <input id="longitude" name="longitude" class="easyui-validatebox" data-options="required:true">  
5.         <font color="red">*.（经纬度直接鼠标在地图选取）</font>  
6.     </td>  
7. </tr>  
8. <tr>  
9.     <th align="right">纬度：</th>  
10.     <td>  
11.         <input id="latitude" name="latitude" class="easyui-validatebox" data-options="required:true">  
12.         <font color="red"></font>  
13.     </td>  
14. </tr>  
15. <tr>  
16.     <th align="right">地址：</th>  
17.     <td>  
18.         <input id="address" name="address" class="easyui-validatebox" style="width: 300px" data-options="required:true,validType:'maxlength[21]'">  
19.     </td>  
20. </tr>   

 

问题一：

  状况1.点击地图，光改变文本框的值，地图上不加载图标

  状况2.经常出现“AMap.Geocoder is not a constructor”

原因：

 

多次加载，easyui的原因。去掉就可以了。