首页 前端知识 【高德地图WEB开发】 入门篇(地图/搜索/经纬度/缩放层级)

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

2024-02-15 14:02:16 前端知识 前端哥 912 823 我要收藏

前言

        本篇文章是高德地图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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2082.html
标签
评论
发布的文章

01-10jQuery框架

2024-03-01 12:03:59

JS jQuery基础2

2024-03-01 12:03:54

jQuery实现文件上传

2024-03-01 12:03:53

JQuery简介与解析

2024-03-01 12:03:31

jquery上传图片单图多图

2024-03-01 12:03:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!