高德地圖使用vue-amap 自定義點座標

1.安裝

npm install -S vue-amap

2.自定義點座標

如果在地圖上不顯示相應的內容，

注意下面兩點

<template>
    <div class="amap-page-container">
      <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"
        class="amap-demo">
        <!-- 一定要添加:content="marker.content"********* -->
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :vid="index" :content="marker.content"></el-amap-marker>
      </el-amap>
    </div>
  </template>

  <script>
    module.exports = {
      data: function() {
        let self = this;
        const center = [121.59996, 31.197646];

        return {
          zoom: 12,
          center,
          markers: []
        };
      },

      created() {
        let self = this;
        let markers = [];
        let index = 0;

        let basePosition = [121.59996, 31.197646];
        let num = 10;

        // content添加相應的內容**********
        for (let i = 0 ; i < num ; i++) {
          markers.push({
            position: [basePosition[0], basePosition[1] + i * 0.03],
            content: `content ${i}`
          });
        }
        this.markers = markers;
      }
    };
</script>

官方文檔：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install