H5定位+vue+高德地图逆地理编码+结构化地址信息

最新推荐文章于 2024-05-10 18:32:16 发布

执。

最新推荐文章于 2024-05-10 18:32:16 发布

阅读量2.2k

点赞数

分类专栏：前端 JavaScript 文章标签： html5 javascript vue js 定位

本文链接：https://blog.csdn.net/qq_21484935/article/details/104342918

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

学习记录：

最终效果：
在这里插入图片描述

1.注册高德地图账号，进入控制台，创建一个应用，获取key（选择web端 js api）。

在这里插入图片描述
2.html中引入，将{parameter} 替换成你的key
（踩坑：&plugin=AMap.Geocoder

<script src="https://webapi.amap.com/mapsv=1.4.15&key={parameter}&plugin=AMap.Geocoder"></script>

3.创建一个container的div，作为地图的容器，并绘制地图

<div id="container"></div>

creataMap:function(){
                        map = new AMap.Map('container',{
                        resizeEnable:true,
                        zoom: 13,  //设置地图显示的缩放级别
                        center: [116.397428, 39.90923],//设置地图中心点坐标
                        layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
                        mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
                        viewMode: '2D',  //设置地图模式
                        lang:'zh_cn',  //设置地图语言类型
                    });

                        // 创建一个 Marker 实例：
                        let marker = new AMap.Marker({
                                position: new AMap.LngLat(116.39,39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                                title: '北京',
                            });

                            // 将创建的点标记添加到已有的地图实例：
                        map.add(marker);

                        marker.setLabel({
                        offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
                        content: "<div class='info'>北京</div>", //设置文本标注内容
                        direction: 'right' //设置文本标注方位
                    });

4.创建一个a标签，绑定点击事件，具体功能为调用定位api，返回坐标信息。
在这里插入图片描述
传送门：原文地址

getLocation:function(){
                    if(navigator.geolocation)
                    {
                        navigator.geolocation.getCurrentPosition(get_position);
                    }
                    else{
                        alert("该浏览器不支持获取地理位置");
                    }
                }

在这里插入图片描述
get_position就是获取地理位置的回调函数，并在地图中绘制当前点坐标

	get_position:(position)=>{
                    let lat = position.coords.latitude ;
                    let lon = position.coords.longitude ;
                    let lnglat = new AMap.LngLat(lon , lat);
                    console.log(lnglat);
                    let geocoder = new AMap.Geocoder();
                    
                    geocoder.getAddress( lnglat , function(status , result){   
                        // console.log(status);
                        console.log(result);
                                             
                        if(status === 'complete' && result.info === 'OK')
                        {
                            
                            map.setCenter(lnglat);

                            // 创建一个 Marker 实例：
                            let marker = new AMap.Marker({
                                position: lnglat,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                                title: "我是title",
                            });

                            // 将创建的点标记添加到已有的地图实例：
                            map.add(marker);

                            // 移除已创建的 marker
                            // map.remove(marker);

                            console.log(result.regeocode.formattedAddress);
                                       
                        }
                    })
                }

使用vue组件实现，全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,  user-scalable=no">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=3c9b0825bfed7f18804709c9399a3389&plugin=AMap.Geocoder"></script>
    <style>
        #container{
            width: 100%;
            height: 700px;
            border: 1px salmon solid;
        }
        a{
            text-decoration: none;
            color: #000;
        }
    </style>
</head>
<body>
    <div id="position">
        <a href="javascript:void(0)" @click="getLocation()">{{model.city}}</a>
        <div id="container"></div>
    </div>
    
    <script>
        var map ;
        var vm = new Vue({
            data() {
                return {
                    model:{city:"未获取地址信息"}
                }
            },
            mounted() {
                this.creataMap();
            },
            methods: {
                creataMap:function(){
                        map = new AMap.Map('container',{
                        resizeEnable:true,
                        zoom: 13,  //设置地图显示的缩放级别
                        center: [116.397428, 39.90923],//设置地图中心点坐标
                        layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
                        mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
                        viewMode: '2D',  //设置地图模式
                        lang:'zh_cn',  //设置地图语言类型
                    });

                        // 创建一个 Marker 实例：
                        let marker = new AMap.Marker({
                                position: new AMap.LngLat(116.39,39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                                title: '北京',
                            });

                            // 将创建的点标记添加到已有的地图实例：
                        map.add(marker);

                        marker.setLabel({
                        offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
                        content: "<div class='info'>北京</div>", //设置文本标注内容
                        direction: 'right' //设置文本标注方位
                    });
                },
                getLocation:function(){
                    if(navigator.geolocation)
                    {
                        navigator.geolocation.getCurrentPosition(this.get_position);
                    }
                    else{
                        alert("该浏览器不支持获取地理位置");
                    }
                },
                get_position:(position)=>{
                    let lat = position.coords.latitude ;
                    let lon = position.coords.longitude ;
                    let lnglat = new AMap.LngLat(lon , lat);
                    console.log(lnglat);
                    let geocoder = new AMap.Geocoder();
                    
                    geocoder.getAddress( lnglat , function(status , result){   
                        // console.log(status);
                        console.log(result);
                                             
                        if(status === 'complete' && result.info === 'OK')
                        {
                            vm.$set(vm.model , 'city', result.regeocode.formattedAddress);
                            map.setCenter(lnglat);

                            // 创建一个 Marker 实例：
                            let marker = new AMap.Marker({
                                position: lnglat,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                                title: vm.model.city,
                            });

                            // 将创建的点标记添加到已有的地图实例：
                            map.add(marker);

                            // 移除已创建的 marker
                            // map.remove(marker);

                            console.log(vm.model.city);
                                       
                        }
                    })
                }
            }
        }).$mount("#position");
    </script>
</body>
</html>

执。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5定位+vue+高德地图逆地理编码+结构化地址信息

学习记录：1.注册高德地图账号，进入控制台，创建一个应用，获取key（选择web端 js api）。2.html中引入，将{parameter} 替换成你的key<script src="https://webapi.amap.com/mapsv=1.4.15&key={parameter}&plugin=AMap.Geocoder"></script&g...
复制链接

扫一扫

专栏目录