博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
高德地图 – 1.问题集锦
阅读量:5296 次
发布时间:2019-06-14

本文共 2680 字,大约阅读时间需要 8 分钟。

image

 

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.46198329.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

原因:

image

 

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

转载于:https://www.cnblogs.com/tangge/p/4710997.html

你可能感兴趣的文章
dedecms讲解-arc.listview.class.php分析,列表页展示
查看>>
Extjs6 经典版 combo下拉框数据的使用及动态传参
查看>>
【NodeJS】http-server.cmd
查看>>
研磨JavaScript系列(五):奇妙的对象
查看>>
面试题2
查看>>
selenium+java iframe定位
查看>>
P2P综述
查看>>
第五章 如何使用Burp Target
查看>>
Sprint阶段测试评分总结
查看>>
sqlite3经常使用命令&amp;语法
查看>>
linux下编译openjdk8
查看>>
【python】--迭代器生成器装饰器
查看>>
Pow(x, n)
查看>>
安卓当中的线程和每秒刷一次
查看>>
随机颜色值
查看>>
每日一库:Modernizr.js,es5-shim.js,es5-safe.js
查看>>
目录相关的操作
查看>>
C++----练习--引用头文件
查看>>
ajax连接服务器框架
查看>>
wpf样式绑定 行为绑定 事件关联 路由事件实例
查看>>