高德地图使用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 


版权声明:本文为memoryI原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。