高德地图基础控件使用搜索定位等

paidaboluo

已于 2022-08-21 17:16:28 修改

阅读量584

点赞数 1

文章标签： html 前端

于 2022-08-21 17:16:06 首次发布

本文链接：https://blog.csdn.net/paidaboluo/article/details/126452407

版权

本文介绍了如何使用高德地图API创建地图，并详细展示了如何添加工具条插件，包括鹰眼、比例尺、定位控件、地图类型切换和定位功能。此外，还演示了搜索和自动补全功能的实现，帮助开发者更好地集成高德地图服务到项目中。

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

首先使用高德地图api需要去官网申请 key ，跟着官网过流程就好，不多赘述

直接引入，使用申请好的key

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key= 申请来的key "></script>

创建地图

// css
#container {width:100%; height: 100vh; }
// html
<div id="container"></div> 
// js
var map = new AMap.Map('container');

使用几个常用的工具：

使用鹰眼，定位，比例尺，切换卫星图，路况和路网图层

批量添加：

    // 同时引入工具条插件，比例尺插件和鹰眼插件
AMap.plugin([
    'AMap.ToolBar',
    'AMap.Scale',
    'AMap.HawkEye',
    'AMap.MapType',
    'AMap.Geolocation',
], function(){
    // 在图面添加工具条控件，放大缩小功能，还有更多选项，   左上角
    map.addControl(new AMap.ToolBar({position:"LT"}));

    // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺  左下角
    map.addControl(new AMap.Scale());

    // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图   右下角，没有打开
    map.addControl(new AMap.HawkEye({isOpen:false}));
   
    // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制  右上角
    map.addControl(new AMap.MapType());
   
    // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置 右下角圆形控件
    map.addControl(new AMap.Geolocation());
});

单个添加：

搜索和自动补全

// css
#myPageTop {
    background: rgb(56, 56, 56,0.2);
    border-radius: 10px;
    position: fixed;
    top: 10px;
    left: calc(50% - 91px);
}

// html
<div id="myPageTop">
    <table>
        <tr>
            <td>
                <label>请输入关键字：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="tipinput"/>
            </td>
        </tr>
    </table>
</div>

// 引入提示数据
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'755d02e49b26938914a932a492798009',
    }
</script>
// js

AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
    var auto = new AMap.AutoComplete({
        input: "tipinput"
    });
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    auto.on("select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
    }
});