您现在的位置是：网站首页> 编程资料编程资料

vue中引入高德地图并多点标注的实现步骤_vue.js_

2023-05-24 341人已围观

简介 vue中引入高德地图并多点标注的实现步骤_vue.js_

vue中引入高德地图并多点标记

步骤:

通过vue的方法引入地图
初始化地图，设置宽和高
信息窗口实例
遍历生成多个标记点

首先在项目的public下的index.html中引入地图

上代码（注释）

补充：下面看下VUE+vue-amap实现高德地图多个标记点展示

安装组件

npm install vue-amap --save

在main.js引入插件

import VueAMap from 'vue-amap' Vue.use(VueAMap) VueAMap.initAMapApiLoader({ key: '在高德地图申请的key', plugin: [ 'AMap.DistrictSearch', 'AMap.Autocomplete', // 输入提示插件 'AMap.PlaceSearch', // POI搜索插件 'AMap.Scale', // 右下角缩略图插件 比例尺 'AMap.OverView', // 地图鹰眼插件 'AMap.ToolBar', // 地图工具条 'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制 'AMap.PolyEditor', // 编辑 折线多，边形 'AMap.CircleEditor', // 圆形编辑器插件 'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置 'AMap.Geocoder' ], v: '1.4.4', uiVersion: '1.0.11' })

在index.vue中运用

html部分代码

js部分代码

会出现的问题

使用高德地图自定义皮肤展示不出来必须在public下的index.html添加以下代码

设备地图

到此这篇关于vue中引入高德地图并多点标注的文章就介绍到这了,更多相关vue高德地图多点标注内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：Vue向后端传数据后端接收为null问题及解决_vue.js_

下一篇：Vue中前端与后端如何实现交互_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

vue中引入高德地图并多点标注的实现步骤_vue.js_

vue中引入高德地图并多点标记

步骤:

首先在项目的public下的index.html中引入地图

相关内容

点击排行

本栏推荐

猜你喜欢