在Vue中使用高德地图

已于 2023-07-24 07:54:32 修改
阅读量3w 收藏 276
点赞数 35
分类专栏： 地图系列 文章标签： vue.js javascript 前端
于 2022-08-01 18:19:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44224921/article/details/126105778
版权

在Vue中使用高德地图

一、如何在Vue中引入基础高德地图

根据官网提示，在Web端，我们需要高德地图加载器：npm i @amap/amap-jsapi-loader -S

注意：
* 此教程适用于Web端，移动端还未尝试，感兴趣的或者有需要的可单独联系我
* @amap/amap-jsapi-loader加载器npm地址

1、步骤一：注册并登录高德地图开放平台，申请密钥

高德地图开放平台
操作步骤如下图：
在这里插入图片描述

2、步骤二：安装高德地图加载器

npm  i  @amap/amap-jsapi-loader -S

3、封装一个自定义地图组件，并初始化地图

<template>
   <!-- 百度地图  -->
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
    
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}
export default {
    data() {
        return {
            map : null,
            mouseTool : null,
            overlays : [],
            auto : null,
            placeSearch : null, 
        }
    },
    methods : {
        initMap() {
            AMapLoader.load({
                "key": "申请好的Web端开发者Key，首次调用 load 时必填", 
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": [地图用到的插件],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                // 初始化地图
                this.map = new AMap.Map('bai-du-map',{
                    viewMode : "2D",  //  是否为3D地图模式
                    zoom : 13,   // 初始化地图级别
                    center : [113.65553,34.748764], //中心点坐标  郑州
                    resizeEnable: true
                });
            }).catch(e => {
                console.log(e);
            });
        }
};
</script>

<style scoped>
#bai-du-map {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: "微软雅黑";
}
</style>
<style>
/* 隐藏高德logo  */
.amap-logo {
    display: none !important;
}
/* 隐藏高德版权  */
.amap-copyright {
    display: none !important;
}
</style>

在这里插入图片描述
注意点：

2021年起，高德地图必须使用安全密钥 即是

window._AMapSecurityConfig = {
    securityJsCode: '安全密钥',
}

在这里插入图片描述

二、根据关键词搜索，并定位到搜索的位置

<template>
   <!-- 百度地图  -->
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
    
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
    // 设置安全密钥
    securityJsCode: '安全密钥',
}
export default {
    props : ["iptId"],
    data() {
        return {
            map : null,
            mouseTool : null,
            overlays : [],
            auto : null,
            placeSearch : null, 
        }
    },
    methods : {
        initMap() {
            AMapLoader.load({
                "key": "密钥", // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.AutoComplete","AMap.PlaceSearch"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                this.map = new AMap.Map('bai-du-map',{
                    viewMode : "2D",  //  是否为3D地图模式
                    zoom : 13,   // 初始化地图级别
                    center : [113.65553,34.748764], //中心点坐标  郑州
                    resizeEnable: true
                });

               this.auto = new AMap.AutoComplete({
                    input : this.iptId  // 搜索框的id 
                }); 
                this.placeSearch = new AMap.PlaceSearch({
                    map: this.map,
                    panel: "panel", // 结果列表将在此容器中进行展示。
                    // city: "010", // 兴趣点城市
                    autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    extensions: 'base' //返回基本地址信息
                });
                this.auto.on("select", this.select);//注册监听，当选中某条记录时会触发
            }).catch(e => {
                console.log(e);
            });
        },
     
        select(e) {
            this.placeSearch.setCity(e.poi.adcode);
            this.placeSearch.search(e.poi.name);  //关键字查询查询
        }
    },
    mounted() {
        this.initMap();
    },
};
</script>

在这里插入图片描述

三、添加放大缩小地图、转盘

<template>
   <!-- 百度地图  -->
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
    
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
    // 设置安全密钥
    securityJsCode: '安全密钥',
}
export default {
    props : ["iptId"],
    data() {
        return {
            map : null,
            mouseTool : null,
            overlays : [],
            auto : null,
            placeSearch : null, 
        }
    },
    methods : {
        initMap() {
            AMapLoader.load({
                "key": "密钥", // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.Scale","AMap.ToolBar","AMap.ControlBar","AMap.MouseTool","AMap.MapType","AMap.HawkEye"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                this.map = new AMap.Map('bai-du-map',{
                    viewMode : "2D",  //  是否为3D地图模式
                    zoom : 13,   // 初始化地图级别
                    center : [113.65553,34.748764], //中心点坐标  郑州
                    resizeEnable: true
                });
                this.map.addControl(new AMap.Scale());   // 添加左下角的比例尺
                let toolBar = new AMap.ToolBar({
                    position: {
                        bottom: '210px',
                        right: '35px'
                    }
                });
                let controlBar = new AMap.ControlBar({
                    position: {
                        bottom: '280px',
                        right: '10px',
                    },
                });
                this.map.addControl(toolBar);   // 添加右下角的放大缩小
                this.map.addControl(controlBar);   // 方向盘
                this.map.addControl(new AMap.MapType());   // 添加右上角的标准图和卫星图  和路况
                this.map.addControl(new AMap.HawkEye());   // 添加地图放大镜
            }).catch(e => {
                 console.log(e);
            });
        },
    },
    mounted() {
        this.initMap();
    },
};
</script>

四、点击地图获取经纬度

initMap() {
            AMapLoader.load({
                "key": "key", // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.Scale","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.ControlBar","AMap.MouseTool"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                // 鼠标点击获取经纬度
                this.map.on('click', function(e) {
                    console.log("经度",e.lnglat.getLng())
                    console.log("纬度",e.lnglat.getLat())
                });
            }).catch(e => {
                console.log(e);
            });
        },

五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除

<template>
   <!-- 百度地图  -->
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
    
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
    // 设置安全密钥
    securityJsCode: '安全密钥',
}
export default {
    data() {
        return {
            map : null,
            mouseTool : null,
            overlays : [],
            auto : null,
            placeSearch : null, 
        }
    },
    methods : {
        initMap() {
            AMapLoader.load({
                "key": "密钥", // 申请好的Web端开发者Key，首次调用 load 时必填
                "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                "plugins": ["AMap.Scale","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.ControlBar","AMap.MouseTool"],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap)=>{
                this.map = new AMap.Map('bai-du-map',{
                    viewMode : "2D",  //  是否为3D地图模式
                    zoom : 13,   // 初始化地图级别
                    center : [113.65553,34.748764], //中心点坐标  郑州
                    resizeEnable: true
                });
                this.mouseTool = new AMap.MouseTool(this.map);
                // 监听draw事件可获取画好的覆盖物
                this.mouseTool.on('draw',function(e){
                    this.overlays.push(e.obj);
                }.bind(this)) 
            }).catch(e => {
                console.log(e);
            });
        },
        draw(type) {
            switch(type){
                case 'marker':{
                    this.mouseTool.marker({
                        //同Marker的Option设置
                    });
                    break;
                }
                case 'polyline':{
                    this.mouseTool.polyline({
                        strokeColor:'#80d8ff'
                        //同Polyline的Option设置
                    });
                    break;
                }
                case 'polygon':{
                    this.mouseTool.polygon({
                        fillColor:'#00b0ff',
                        strokeColor:'#80d8ff'
                        //同Polygon的Option设置
                    });
                    break;
                }
                case 'rectangle':{
                    this.mouseTool.rectangle({
                        fillColor:'#00b0ff',
                        strokeColor:'#80d8ff'
                        //同Polygon的Option设置
                    });
                    break;
                }
                case 'circle':{
                    this.mouseTool.circle({
                        fillColor:'#00b0ff',
                        strokeColor:'#80d8ff'
                        //同Circle的Option设置
                    });
                    break;
                }
            }
           
        }, 
    },
    mounted() {
        this.initMap();
    },
};
</script>

清除绘制

 // 清除
 // map.remove(overlays)
 // overlays = [];
 // 或者
 // mouseTool.close(true)//关闭，并清除覆盖物

六、总结

一般的，使用高德地图，不需要参考其他博主写的，基本上就是安装一个加载器@amap/amap-jsapi-loader，然后参考高德地图开放webjs文档，就完全可以自己实现业务需求

高德地图开放webjs文档 ,这个API文档写的很好，包括了针对于Vue和React的基本引用，以及相关地图需求都有API满足

原谅我很悲
关注
  • 35
    点赞
  • 踩
  • 276
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 27
    评论
专栏目录
vue中使用高德地图（JSAPI2.0示例）
04-28
参考高德地图官网的示例实现的。
学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）
bsegebr的博客
03-02 1509
高德地图API官网：高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的，所以针对地图 JavaScript API****结合 Vue 展开介绍。 一、案例效果 二、开发准备 需要注意想要使用 JS API 必须注册账号并获取 key 值。 1. 注册高德开放平台账号 正常输入个人信息注册即可。 2. 创建应用添加 key 值 注册成功之后，进入控制台，然后点击创建新应用； 填写名称应用名称和类型之后就可以看到已创建的应用了； 接下来点击“添加”为应用添加 key 值
vue 借助vue-amap插件对高德地图的简单使用
qq_58340302的博客
03-28 1083
需求：实现点击获取经纬度、定位、对特殊位置标点及自定义信息窗体功能。
vue项目中使用高德地图
文龙刚的博客
11-08 4046
vue项目中使用高德地图
AMapByVue:在VUE中使用高德地图
05-08
Vue框架下 使用高德地图 A Map Use Vue By QSY 该项目的基于 iView的UI框架开发的实例 Build Setup # install dependencies npm/cnpm install # serve with hot reload at localhost:8880 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 实例1 地图选择组件 实例2 地图信息窗体 实例2 复杂地图信息窗体 For detailed explanation on how things work, checkout the and .
vue 实现 高德地图绘制并编辑区域功能
weixin_44766849的博客
07-27 1227
（删除功能仍有瑕疵 实现了部分删除功能 都是比较傻瓜试的操作 不喜勿喷）要在控制台见一个key才可以运行高德地图插件 要选web服务的才行。3.回显其他人绘制的范围（业务需求绘制范围不可以重复）业务需要参考很多文章最后实现的功能 仍有缺陷 先展示。编辑的时候白色点是可以取消掉的。1.根据所在区域自动绘制范围。2.切换区域自动切换所画范围。4.绘制的区域可编辑 可删除。我的是弹窗的形式 主页面。
vue中使用高德地图
牛马程序员进阶之路
07-07 3025
使用高德地图在vue中完成功能：单一某省的地图，3D地图展示，3D模型在地图加载并展示，地图上绘制圆圈。
高德地图系列（一）：vue项目如何使用高德地图、入门以及基本控件使用
qq_45796592的博客
11-14 3857
vue项目使用高德地图、入门以及基本控件详细使用教程
❤ Vue使用高德地图
林太白
05-26 3637
❤ Vue使用高德地图 🌂 1、注册自己的高德地图key 🌂 2、页面上引入使用自己的高德地图key <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 🌂 3、页面上使用自己的高德地图 1、写入容器
在vue项目中使用高德地图
qq_41585169的博客
06-30 1752
【代码】在vue项目中使用高德地图。
vue中使用高德地图的方法
m0_73481765的博客
07-01 1214
在这个示例中，我们演示了如何使用vue-cli和高德地图JavaScript API创建一个简单的地图应用。你可以在此基础上添加更多的功能和交互。在你的项目中安装高德地图JavaScript API。替换"your api key"成你自己申请的API Key。现在你应该能够在浏览器中看到一个显示高德地图的页面。1.安装高德地图JavaScript API。3.在App.vue中使用地图组件。
vue高德地图之玩转周边
01-19
前言：在之前的博客中，有成功引入高德地图，这是以前的地址  vue 调用高德地图。 因为一些需求，需要使用到地图的周边功能。 完整的项目代码请查看  我的github 一 、先看要实现的结果，参考了链家的周边，如图所示。  二 、原理分析 1、引入高德api，这个在之前的博客提到过，vue 调用高德地图。 2、使用地图的周边插件，这是  高德网站的api。 AMap.PlaceSearch //地点搜索服务插件，提供某一特定地区的位置查询服务 在插件中的各种方法中选取了searchNearBy的方法。 searchNearBy(keyword:String,center:LngLat,r
vue-cli中使用高德地图的方法示例
10-17
主要介绍了vue-cli中使用高德地图的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在vue中高德地图引入和轨迹的绘制的实现
01-21
vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from ‘vue-amap' Vue.use(VueAMap); ...
vue中使用高德地图-加载高德地图几种方法
03-12
vue中使用高德地图-加载高德地图几种方法
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 615
步骤很详细，直接上教程……
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 359
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
Vue项目中异步组件的引入使用
Niucode的博客
04-26 245
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 270
vue echarts 柱状图 堆叠柱状图
vue 高德地图卫星地图
09-10
你可以使用高德地图提供的 JavaScript API 来在 Vue 中集成高德地图的卫星地图。首先，你需要在 HTML 文件中引入高德地图的 JavaScript API： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的API密钥"></script> ``` 然后，在 Vue 组件中，你可以使用生命周期钩子函数 `mounted` 来初始化地图并显示卫星地图： ```javascript mounted() { // 创建地图实例 const map = new AMap.Map('mapContainer', { zoom: 13, // 设置地图缩放级别 center: [经度, 纬度], // 设置地图中心点坐标 layers: [new AMap.TileLayer.Satellite()], // 设置地图图层为卫星地图 }); } ``` 在上面的代码中，你需要将 `经度` 和 `纬度` 替换为你想要显示的地图中心点的经纬度。然后，你可以在 Vue 模板中添加一个带有 `id` 为 `mapContainer` 的 `<div>` 元素来显示地图： ```html <template> <div id="mapContainer" style="width: 100%; height: 400px;"></div> </template> ``` 这样，当 Vue 组件被渲染时，就会显示一个带有卫星地图的高德地图实例。 请注意，上述代码中的 `你的API密钥` 部分需要替换为你在高德地图开发者平台申请的 API 密钥，否则地图可能无法正常显示。另外，为了避免隐私泄露，强烈建议将 API 密钥存储在安全的地方，并不要直接暴露在客户端代码中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 27
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

原谅我很悲

不要打赏哦，加个好友一起学习呗

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值