想要的效果如下：

高德地图 && 信息窗体

步骤一：

申请高德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>

补充：

16291314.html

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

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

巴特西

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

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

最新文章

热门文章