欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在VueCli中使用高德地图

程序员文章站 2022-04-24 09:27:16
...

一.在public文件夹下面的index.html文件中引入

<script src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key值"></script>

注意 这个引用需要放在body标签内部
二.配置vue.config.js文件
这个文件需要自己配置位置如图
module.exports={ configureWebpack:{ externals:{ 'AMap':'AMap' } } }
在VueCli中使用高德地图
三.重新跑一下这个项目
npm run serve
四.实际应用

import AMap from "AMap"
	export default{
		mounted(){
			this.GaodeMap()
		},
		methods:{
			GaodeMap(){
				var map = new AMap.Map("map", {
				zoom: 15, //设置地图显示的缩放级别
				center: [113.668227, 34.783391] //设置地图中心点坐标
				});
				var marker = new AMap.Marker({
					position: new AMap.LngLat(113.668227, 34.783391), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
					title: "位置标题"
					});
					map.add(marker);
			}
		}
	}

在VueCli中使用高德地图

相关标签: vue