美文网首页
【vue】在vue中使用高德地图API

【vue】在vue中使用高德地图API

作者: u5f20u5929u8000 | 来源:发表于2019-04-11 11:14 被阅读0次
1、通过NPM安装vue-amap模块:

npm install --save vue-amap

2、在main.js中引用vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
    key: '申请的高德地图Key'
});
3、在vue组件中使用:
<template>
  <div>
    <el-amap
      :center='center'
      :zoom='zoom'
    >
      <el-amap-marker 
        :position="center"
        :label="label"
      ></el-amap-marker>
    </el-amap>
  </div>
</template>
<script>
data() {
  return {
    center: [116.397428, 39.90923],
    zoom: 15,
    label:{
      content: '自定义标题',
      offset:[10,12]
    }
  }
}
</script>

相关文章

网友评论

      本文标题:【vue】在vue中使用高德地图API

      本文链接:https://www.haomeiwen.com/subject/draziqtx.html