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

最新推荐文章于 2024-08-23 20:08:17 发布

置顶

天黑路滑人心杂丶

最新推荐文章于 2024-08-23 20:08:17 发布

阅读量8.6k

点赞数 3

分类专栏： JavaScript 文章标签： Javascript API

本文链接：https://blog.csdn.net/QZPHP_L/article/details/82143240

版权

这篇博客详细介绍了如何在Web端使用高德地图API，涵盖了浏览器定位、拖拽选址和POI周边搜索三个功能的集成方法。通过引入必要的JS代码和UI组件，实现了定位和微调操作。关键在于正确配置API的Key值，否则可能影响其他功能的正常使用。提供了测试环境的使用提示和部分HTML代码示例。

摘要由CSDN通过智能技术生成

关于使用高德地图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({