vue引入高德地图多种方法实现
vue引入高德地图多种方法实现第一种按 NPM 方式全局使用 Loader安装依赖在main.js中进行全局注册在页面中使用第二种按 NPM 方式局部使用 Loader安装依赖在需要使用地图的页面进行初始化第三种直接加载 JSAPI 脚本vue项目目录的public/index.html文件下添加以下代码在需要使用的页面直接使用如果此时报运行报错.eslintrc.js里面加上下面这段代码即可在m
vue引入高德地图多种方法实现
第一种按 NPM 方式全局使用 Loader
安装依赖
在main.js中进行全局注册
在页面中使用
第二种按 NPM 方式局部使用 Loader
安装依赖
在需要使用地图的页面进行初始化
第三种直接加载 JSAPI 脚本
vue项目目录的public/index.html文件下添加以下代码
在需要使用的页面直接使用
如果此时报运行报错
.eslintrc.js里面加上下面这段代码即可
第一种按 NPM 方式全局使用 Loader
安装依赖
npm install @amap/amap-jsapi-loader
在main.js中进行全局注册
import AMapLoader from '@amap/amap-jsapi-loader';
// 如果需要密钥
window._AMapSecurityConfig = {
securityJsCode: '没有则不用' // 开发环境使用
}
AMapLoader.load({
key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
AMapUI: {
// 是否加载 AMapUI,缺省不加载
version: '1.1', // AMapUI 缺省 1.1
plugins: [] // 需要加载的 AMapUI ui插件
},
Loca: {
// 是否加载 Loca, 缺省不加载
version: '2.0.0' // Loca 版本,缺省 1.3.2
}
}).then((AMap) => {
// 挂载AMap
Vue.prototype.$AMap = AMap;
});
在页面中使用
mounted() {
setTimeout(()=>{
// 需要确保AMap已经挂在到$AMap上
this.initMap()
},1000)
},
methods: {
initMap() {
this.map = new this.$AMap.Map('container', {
viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D',
zoom: 11, //初始化地图层级
center: [119.20058, 32.98972],//初始化地图中心点
});
}
}
第二种按 NPM 方式局部使用 Loader
安装依赖
// 高德地图官方推荐依赖
npm install @amap/amap-jsapi-loader
参考 vue高德地图初体验地图初始化(一)_菜鸡的崛起的博客-CSDN博客
第三种直接加载 JSAPI 脚本
vue项目目录的public/index.html文件下添加以下代码
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你自己的key"></script>
<script>
window._AMapSecurityConfig = {
securityJsCode: '你自己的密钥,没有则不用' // 开发环境使用
}
</script>
在需要使用的页面直接使用
mounted () {
this.initMap()
},
methods: {
initMap () {
this.map = new AMap.Map('container', {
viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D',
zoom: 11, // 初始化地图层级
center: [119.20058, 32.98972]// 初始化地图中心点
})
}
}
如果此时报运行报错
‘AMap’ is not defined no-undef
.eslintrc.js里面加上下面这段代码即可
globals: {
AMap: true
}
更多参数说明
原文链接:https://blog.csdn.net/l_____z______z/article/details/125996719
更多推荐
所有评论(0)