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

最新推荐文章于 2025-10-15 21:03:30 发布

原创最新推荐文章于 2025-10-15 21:03:30 发布 · 置顶 · 8.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#Javascript API

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

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

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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/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({
          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);      //返回定位出错信息
      });
      //精确定位结束
      //拖拽成功触发
      positionPicker.on('success', function(positionResult) {
            document.getElementById('address').innerHTML = positionResult.address;      
            AMap.service(["AMap.PlaceSearch"], function() {
        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            pageSize: 5,
            pageIndex: 1,
            panel: "panel"
        }); 
        var cpoint = [ positionResult.position]; //中心点坐标
        placeSearch.searchNearBy('', cpoint, 200, function(status, result) {
        });
    });
        });
        positionPicker.on('fail', function(positionResult) {
            document.getElementById('address').innerHTML = '获取位置信息失败';
        });
        var onModeChange = function(e) {
            positionPicker.setMode(e.target.value)
        }
        positionPicker.start();
        map.panBy(0, 1);
        map.addControl(new AMap.ToolBar({
            liteStyle: true
        }))
    });
    </script>

到此基本实现定位和微调功能，下面可以根据需要加入POI周边搜索

POI周边搜索

浏览器定位成功后，自动检索周边一定范围内的地点
var cpoint = [ positionResult.position]; //中心点坐标
这里的positionResult.position是根据上文中拖拽选址成功后的返回值得来的
这段js需要加到拖拽选址positionPicker.on返回success的函数中·

     AMap.service(["AMap.PlaceSearch"], function() {
        var placeSearch = new AMap.PlaceSearch({ //构造地点查询类
            pageSize: 5,
            pageIndex: 1,
            panel: "panel"
        });

        var cpoint = [ positionResult.position]; //中心点坐标
        placeSearch.searchNearBy('', cpoint, 200, function(status, result) {

        });
    });

以上实现了定位，拖拽选址，POI周边功能
需要特别注意的是Key值必须是Web端(JS API)的key值，这个Key值可以在高德开发平台的控制台中添加Key，
选择Web端(JS API)点击生成Key。使用android或其他生成的key值，可以实现定位，但是其他功能都不会实现。

测试时需放入环境中，使用`localhost`或`127.0.0.1`访问

这里写图片描述

下面贴出html部分

css可根据需要自行修改

<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/positionPicker.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PositionPicker/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>高德地图</title>
    <style>
    html,
    body {
        height: 100%;
        margin: 0;
        width: 100%;
        padding: 0;
        overflow: hidden;
        font-size: 13px;
    }

    .map {
        height: 310px;
        width: 100%;

    }

    #right {
        color: #444;
        background-color: #f8f8f8;
        min-width: 30px;
        line-height:30px;
        height: 30px;
        position: absolute; 
        top: 0;
        left: 0;

    }

    .title {
        width: 100%;
        background-color: #dadada
    }

    button {
        border: solid 1px;
        margin-left: 15px;
        background-color: #dadafa;
    }

    .c {
        font-weight: 600;
        padding-left: 15px;
        padding-top: 4px;
    }

    #lnglat,
    #address,
    #nearestJunction,
    #nearestRoad,
    #nearestPOI,
    .title {
        padding-left: 15px;
    }
    #panel {
           position: absolute; 
            background-color: white;
            height: 150px;
            overflow-y: auto;
            bottom: 0px;
            width: 100%;
            border-bottom: solid 1px silver;
        }
      .poi-img,.amap-zoomcontrol,.poi-tel,.poi-more{
        display:none;
      }
    </style>
</head>
<body>
    <div id="container" class="map" tabindex="0"></div>
    <div id='right'>
        <div>
            <div id='address'></div>
        </div>
    </div>
  <div id="panel"></div>
</body>
</html>