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

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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容