【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）

前言

本篇文章是高德地图web开发入门篇，实现地图搜索等基本功能，后续会继续更新地图标记点、驾车、骑行、货车等单地点\多地点导航、公交路线、兴趣周边点、及其他地图功能开发文章，所有功能均使用js实现，这样在各个框架均可使用。

需要提前去高德地图Api申请地图key和安全密钥（官网按流程走就可以，这里不介绍了，不会的可以问我）

本篇实现效果如下(文末有完整代码)：

一.快速上手

在页面创建容器，引入地图JSAPI脚本，创建地图核心代码就是new AMap.Map()，其中container为地图容器id，创建同时可以给地图设置默认中心点、级别等

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#container {width:100%; height: 100vh;position: absolute;}</style><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'申请的安全密钥',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
</head>
<body><div id="container"></div> <script>let map = new AMap.Map('container',{zoom:11, // 地图级别center: [116.397428, 39.90923], // 中心点坐标});</script>
</body>
</html>

在浏览器打开如下，地图中心就是我们设置的center坐标

二.修改地图缩放级别/经纬度坐标

现在我们已经打开了地图，那么如何修改地图缩放级别和经纬度呢，这里将用到两个方法：

map.setZoom() 修改地图级别

map.setCenter() 修改地图经纬度坐标

接下来我们现在地图上创建工具栏容器，样式根据具体需要去写，这里就注重功能了：

<style>#left-toolbar{width: 300px;height: 80px;position: relative;box-shadow: 0 0 10px black;top: 10px;left: 10px;background-color: rgb(246, 249, 250);padding: 5px;}
</style><div id="left-toolbar">层级:<input type="text" name="" id="inputZoom"><button id="btnZoom">改变缩放层级</button>经度:<input type="text" name="" id="longitude"><br/>纬度:<input type="text" name="" id="latitude"><button id="btnCenter">改变经纬度</button></div>

定义改变缩放层级与改变缩放层级事件

// 改变缩放层级
btnZoom.onclick = () =>{map.setZoom(inputZoom.value)
}// 改变经纬度
btnCenter.onclick = () =>{// 参数类型为Array,[经度,纬度]map.setCenter([Number(longitude.value),Number(latitude.value)])
}

三.获取经纬度对应城市地区

先创建一个展示容器

 <style>.left-text{width: 300px;height: 80px;position: relative;box-shadow: 0 0 10px black;top: 20px;left: 10px;background-color: rgb(246, 249, 250);padding: 5px;}
</style><div class="left-text"></div>

使用getCity()获取当前行政区信息，并且在moveend事件（监听地图移动）中调用

// 获取地图当前行政区
const getArea = () =>{map.getCity((info) =>{console.log(info);document.querySelector('.left-text').innerText = `您现在在${info.province}${info.city}${info.district}`});
}// 监听地图移动
map.on('moveend',() =>{getArea()})

四.搜索功能

先在右边加上搜索容器

 <style>.left-text{width: 300px;max-height: 600px;position: absolute;box-shadow: 0 0 10px black;top: 10px;right: 10px;background-color: rgb(246, 249, 250);padding: 5px;z-index: 10;}
</style><div class="left-search">城市：<input type="text" name="" id="setCityIpt"><ul id="node"></ul>
</div>

实现搜索功能需要引入插件，引入方式为AMap.plugin('插件名',function(){}),接下来我们需要监听输入框输入，并将结果展示在ul中

AMap.plugin('AMap.Autocomplete',() => {// 监听输入框内容setCityIpt.oninput = function(){// 查询前情况nodenode.innerText = '';if(this.value == ''){return;}// 调用搜索api new AMap.Autocomplete().search(this.value,function(status,data){data.tips.forEach(item =>{let oLi = document.createElement('li')oLi.innerText = item.namenode.appendChild(oLi)   // 地址绑定点击事件oLi.onclick = function(){// 跳转地址 map.setCenter([item.location.R,item.location.Q])}})})}
})

AMap.Autocomplete().search()返回的data中,还有详细地址等，这里只取name字段，其他就不做展示，到这里就实现了开篇GIF图的效果啦，本篇主要是基本功能的入门，后续继续更新其他功能。

附上完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;list-style: none;}#container {width:100%; height: 100vh;position: absolute; }#left-toolbar{width: 300px;height: 80px;position: relative;box-shadow: 0 0 10px black;top: 10px;left: 10px;background-color: rgb(246, 249, 250);padding: 5px;z-index: 10;}.left-text{width: 300px;height: 80px;position: relative;box-shadow: 0 0 10px black;top: 20px;left: 10px;background-color: rgb(246, 249, 250);padding: 5px;z-index: 10;}.left-search{width: 300px;max-height: 600px;position: absolute;box-shadow: 0 0 10px black;top: 10px;right: 10px;background-color: rgb(246, 249, 250);padding: 5px;z-index: 10;}</style><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'安全密钥',}</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=key"></script>
</head><body><div id="container"></div> <div id="left-toolbar">层级:<input type="text" name="" id="inputZoom"><button id="btnZoom">改变缩放层级</button>经度:<input type="text" name="" id="longitude"><br/>纬度:<input type="text" name="" id="latitude"><button id="btnCenter">改变经纬度</button></div><div class="left-text"></div><div class="left-search">城市：<input type="text" name="" id="setCityIpt"><ul id="node"></ul></div><script>let map = new AMap.Map('container',{zoom:10, // 地图缩放级别center: [116.397428, 39.90923], // 经纬度});// 改变缩放层级btnZoom.onclick = () =>{map.setZoom(inputZoom.value)}// 改变经纬度btnCenter.onclick = () =>{// 参数类型为Array,[经度,纬度]map.setCenter([Number(longitude.value),Number(latitude.value)])}// 获取地图当前行政区const getArea = () =>{map.getCity((info) =>{console.log(info);document.querySelector('.left-text').innerText = `您现在在${info.province}${info.city}${info.district}`});}getArea()// 监听地图移动事件map.on('moveend',() =>{getArea()})AMap.plugin('AMap.Autocomplete',() => {// 监听输入框内容setCityIpt.oninput = function(){// 查询前情况nodenode.innerText = '';if(this.value == ''){return;}// 调用搜索api new AMap.Autocomplete().search(this.value,function(status,data){console.log(data);data.tips.forEach(item =>{let oLi = document.createElement('li')oLi.innerText = item.namenode.appendChild(oLi)   // 地址绑定点击事件oLi.onclick = function(){// 跳转地址 map.setCenter([item.location.R,item.location.Q])}})})}})</script>
</body>
</html>

【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）相关推荐

【微信小程序】开发入门篇（二）
前言 ❤️ 所谓信仰,可能就是在人们一无所剩的时候仅有的那种东西 ❤️ [微信小程序]开发入门篇(二) 一.小程序的宿主环境 (1)宿主环境简介 1.1 什么是宿主环境 1.2 小程序的宿主环境 (2 ...
cesium 页面截图_Cesium开发入门篇 | 02Cesium开发环境搭建及第一个示例
01 开发环境准备利用Cesium API进行二次开发属于Web前端开发范畴,目前比较火的Web三剑客包括React.Vue.AngularJS,每个js库的详细介绍可转至官网查看,在此不做详细介绍 ...
【微信小程序】开发入门篇（一）
前言 ❤️ 你可能认为一个人无法改变世界,但我想让你知道,这个世界也无法改变像我这样的人 ❤️ [微信小程序]开发入门篇(一) 一.小程序简介 (1)小程序与普通网页开发的区别二.第一个小程序 (1 ...
后悔没早点看这篇直播系统定制开发入门篇
直播想必大家都不陌生了,在互联网的风口下,以及5G技术的推动,流量带宽的提高,使得直播在我们生活中扮演着越来越重要的角色.本文先来讲一下入门直播需要了解的一些基本概念,搜集整理了直播入门需要了解的一些 ...
JSP WEB开发入门基础到高手进阶教程002
JSP WEB开发入门基础到高手进阶教程 -------开发入门 JSP与微软的Active Server Pages 兼容,但它是使用类似HTML的卷标以及Java程序代码段而不是VBScript. ...
【python】 web开发入门
进入Web开发现在你完成了Python忍者训练,准备深入Ptyhon的Web开发,但现在的问题是有很多的框架,从中选择最好的框架非常困难,但从初学者的角度出发,Flask基本Web框架将非常适合We ...
Flask Web开发入门
Flask Web开发入门(八)之文件上传 https://blog.csdn.net/kangkanglou/article/details/79027425 前端:详情见上面的链接/也可以直接用f ...
web开发入门_Web开发人员和设计师的自由职业入门
web开发入门 Learn how to get started with freelancing as a web developer and designer. Cara Bell shares ...
Hololens开发入门篇-郑洪智-专题视频课程
Hololens开发入门篇-572人已学习课程介绍本课程使用Hololens模拟器,基于Unity2017.2及Visual Studio 2017开发课程收益学会Ho ...

【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）

前言

一.快速上手

二.修改地图缩放级别/经纬度坐标

三.获取经纬度对应城市地区

四.搜索功能

【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）相关推荐

最新文章

热门文章

【高德地图WEB开发】 入门篇（地图/搜索/经纬度/缩放层级）

前言

一.快速上手

二.修改地图缩放级别/经纬度坐标

三.获取经纬度对应城市地区

四.搜索功能

【高德地图WEB开发】 入门篇（地图/搜索/经纬度/缩放层级）相关推荐

最新文章

热门文章

【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）

【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）相关推荐