高德地图使用vue-amap 自定义点坐标

原创

于 2019-11-11 17:12:20 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#高德地图 #vue-amap #点坐标 #自定义内容

本文档介绍了如何在Vue项目中使用vue-amap插件进行高德地图的点坐标自定义设置。通过安装vue-amap插件，并结合官方文档，解决地图上不显示内容的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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];