【高德地图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(){
        // 查询前情况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>

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

前言

一.快速上手

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

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

四.搜索功能

猜你喜欢

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