vue项目使用vue-amap调用高德地图api详细步骤

 

想要的效果如下 ：

高德地图 && 信息窗体

 

 

 

步骤一：

• 申请高德key

  高德开放平台 | 高德地图API (amap.com)

（可参考博客：   [996]如何申请高德地图用户Key_周小董的博客-CSDN博客_高德开发者平台申请key）

 

步骤二：

• npm安装

          npm install vue-amap --save

 

步骤三：

• main.js中挂载vue-amap

// 引入高德地图
import VueAMap from "vue-amap";

Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: "8bcd5d53aee035144d261kkkegeigego",  // 换成你自己的key,这是我随便写的
  // 插件集合
  plugin: [
    "AMap.Autocomplete",
    "AMap.PlaceSearch",
    "AMap.Scale",
    "AMap.OverView",
    "AMap.ToolBar",
    "AMap.MapType",
    "AMap.PolyEditor",
    "AMap.CircleEditor",
  ],
  // 高德 sdk 版本，默认为 1.4.4
  v: "1.4.4",
});

 

 

步骤四：

• 组件用法

<template>
  <div class="mapBox">
    <el-amap vid="amapDemo" :zoom="zoom" :center="center" style="height: 600px">
      <el-amap-marker
        v-for="marker in markers"
        :position="marker.position"
        :events="marker.events"
        :key="marker.index"
      ></el-amap-marker>
      <el-amap-info-window
        v-for="window in windows"
        :offset="window.offset"
        :position="window.position"
        :content="window.content"
        :open="window.open"
        :key="window.index"
      ></el-amap-info-window>
    </el-amap>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      unit: "xxxxx政府司法局",
      address: "xx省xx市xxxxx大道东433号",
      markers: [],
      windows: [],
      center: [116.407387, 39.904179],
      zoom: 16,
      // label: {
      //   // content: "自定义标题",
      //   offset: [10, 12],
      // },
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap(map) {
      this.markers.push({
        position: [116.407387, 39.904179],
      });

      this.windows.push({
        position: [116.407387, 39.904179],
        content:
          "<h2 style='font-weight: bold;width: 400px;margin: 10px'>" +
          this.unit +
          "</h2>" +
          "<div style='margin: 10px'>" +
          "地址：" +
          this.address +
          "</div>",
        offset: [0, -20],
        open: true,
      });

      // var map = new AMap.Map("container", {
      //   zoomEnable: true, //是否禁止缩放
      //   zoom: 12, //缩放比例
      //   dragEnable: false, //禁止拖动
      //   cursor: "hand", // 鼠标在地图上的表现形式，小手
      // });
      // // 初始化工具条
      // map.plugin(["AMap.ToolBar"], function () {
      //   map.addControl(new AMap.ToolBar());
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.mapBox {
  position: relative;
  width: 100%;
  height: 600px;
}
</style>

 

 

 补充：

高德地图经纬度拾取 https://www.cnblogs.com/wwyxjjz/p/16291314.html

 

 

 

以上就是在vue项目中使用vue-amap调用高德地图api的基本使用，具体对地图的操作可以根据文档的规范来就可以了

 

 

 

 

作者：微微一笑绝绝子
出处：https://www.cnblogs.com/wwyxjjz/p/16291262.html
本博客文章均为作者原创，转载请注明作者和原文链接。