1.vue使用高德地图api
高德地图api官网：https://developer.amap.com/product/map#/
1.1配置
vue.config.js
module.exports = {
configureWebpack: {
externals: {
'AMap': 'AMap',// 高德地图配置
},
},
}
1.2引入
在 index.html 文件脚本引入
/*
*@key: 高德地图api注册的key
*/
<script src="https://webapi.amap.com/maps?v=1.4.15&key=key"></script>
<div id="app"></div>
1.3 使用
<div id="container" class="map"></div>
<script>
import AMap from 'AMap';
methods: {
createMap() {
//创建地图
var map = new AMap.Map('container', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom:11, //初始化地图层级
center: [120.024039,35.818754] //初始化地图中心点
});
//添加标记
var marker = new AMap.Marker({
position: [120.024039,35.818754],
offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);
},
},
created() {
this.createMap();
}
</script>
1.4 效果
image.png
