关于使用高德地图API Web端(JS API)

关于使用高德地图API web端(JS API)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/QZPHP_L/article/details/82143240

---

本次集成了浏览器定位，拖拽选址，POI周边搜索三个功能

浏览器定位

只需要使用官网浏览器定位demo中一小段js代码

 //精确定位
 map.plugin('AMap.Geolocation', function() {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        buttonPosition:'RB'
     });
     map.addControl(geolocation);
     geolocation.getCurrentPosition();
     AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
     AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
  });

拖拽选址

此功能需要引入高德地图的UI,否则页面上一些按键不显示

<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.9&key=key值&plugin=AMap.ToolBar'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
   AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
    
       var map = new AMap.Map('container', {
            zoom: 16,
            scrollWheel: false,
            resizeEnable: true     
       })
       var positionPicker = new PositionPicker({
            mode: 'dragMap',
            map: map
       });
      //精确定位
    map.plugin('AMap.Geolocation', function() {
    
       geolocation = new AMap.Geolocation({