前言
本篇文章是高德地图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(){
// 查询前情况node
node.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.name
node.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(){
// 查询前情况node
node.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.name
node.appendChild(oLi)
// 地址绑定点击事件
oLi.onclick = function(){
// 跳转地址
map.setCenter([item.location.R,item.location.Q])
}
})
})
}
})
</script>
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
