1、引入高德组件
在index.html中引入高德地图及申请的key
2、组件中使用高德，代码如下：
<template>
<div id="container" style="width:100%;height:100%;position:fixed;">
</div>
</template>
<script type="text/javascript">
export default {
name:"GaoDeVec",
data(){
return{
gmap:null,
curzoom:8,
curcenter:[120.300059511791910, 30.419735074496056], //[112.8928472, 23.1572272]
}
},
methods:{
//加载地图
loadMap(){
this.gmap = new AMap.Map('container', {
zoom: this.curzoom,// 8,//级别
resizeEnable: true,
center: this.curcenter, //[118.7128472, 31.9892272],//中心点坐标
mapStyle: 'amap://styles/d3737aab853bdd3ad090b3d9230fe0a4', //地图样式
})
//监听地图事件
this.gmap.on('moveend', this.getMapInfo);
this.gmap.on('zoomend', this.getMapInfo);
},
getMapInfo(){
var curzoom=this.gmap.getZoom()
var curcenter=this.gmap.getCenter()
this.setCurzoom(curzoom)
this.setCurcenter([curcenter.lng,curcenter.lat])
},
},
mounted(){ this.loadMap() }
}
<script />
这样高德地图就能正常加载了。。。
