使用vue-amap实现地图经纬度显示、具体地址显示、卫星图、路网路况、在鼠标按下的地方添加标注点和添加多个标注点

---

写在开头

我的上篇博客已经写了如何在vue的工程中嵌入vue-amap组件，从而在网页中添加个地图功能。想要了解这部分的可以去看一下，链接如下：在VUE中导入高德地图组件模块(vue-amap)
。

一、本文目的

本文是上一篇博客在VUE中导入高德地图组件模块(vue-amap)
的延续，本篇博客将实现地图经纬度显示、具体地址显示、卫星图、路网路况、在鼠标按下的地方添加标注点和添加多个标注点这几个功能。

二、版本信息

{
  "name": "vueamap",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.4",
    "vue": "^2.6.11",
    "vue-amap": "^0.5.10",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "vue-template-compiler": "^2.6.11"
  }
}

三、在App.vue中调用其他.vue文件

上一篇博客写的关于地图的代码是放在App.vue中的，这种方法对后续的模块化开发并不适用，故本小节将创建一个map.vue文件，并在App.vue中调用此文件，从而实现模块化开发。
添加组件可以参考下面的链接：https://www.jb51.net/article/156127.htm

1、创建map.vue文件存放地图程序

2、给子组件map.vue命名一个全局id

export default {
  name: "mmap"
}

3、返回App.vue组件。先引入组件，之后再渲染界面。

<script>
    import mmap from "./components/map"
    export default {
        name:'App',
        components: {
            mmap
        }
    }
</script>

4、此时就可以在App.vue文件中调用map.vue文件了。

<mmap></mmap>

5、最终的代码
/components/map.vue**

<template>
    <div class="amap-wrapper">
      <el-amap
        class="amap-box"
        vid="amap-vue"
        :zoom="zoom"
        :center="center"
      ></el-amap>
    </div>
</template>


  <script>

export default {
  name: "mmap",
  data() {
    return {
      zoom: 11,
      center: [112.5862, 37.8268],
    };
  },
};
</script>

  <style>
.amap-wrapper {
  width: 100%;
  height: 800px;
  float: right;
}
</style>

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>

    <mmap></mmap>
  </div>
</template>


<script>
    import mmap from "./components/map"
    export default {
        name:'App',
        components: {
            mmap
        }
    }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

四、点击地图显示经纬度和具体地址

参考链接：https://elemefe.github.io/vue-amap/#/zh-cn/examples/base/amap

1、添加Geocoder以使用坐标转换服务

main.js

window.VueAMap.initAMapApiLoader({
  key: 'YOUR_CODE',
  plugin: [... 'Geocoder']
});

2、修改map.vue中的代码以增加该功能

本博客代码在第六小节

3、踩过的坑

​ 代码中有一段控制台输出result ----- console.log(position_xy); 按F12之后看控制台的输出参数，如果显示的是INVALID_USER_KEY则检查main.js中的KEY是否是正确的，因为该提示是告诉你开发者发起请求时，传入的key不正确或者过期

五、添加卫星图和路网路况

参考链接：https://elemefe.github.io/vue-amap/#/zh-cn/base/amap

1、在map.vue的中添加组件amapManager和plugin。其中plugin是为了导入卫星图和路网，amapManager为地图管理对象
2、直接放代码
本博客代码在第六小节

六、在鼠标按下的地方添加标注点

参考链接https://elemefe.github.io/vue-amap/#/zh-cn/coverings/marker
设计目标：显示地图，在地图中按一下就可以在鼠标点击处添加标志点，在鼠标点击另外的地方时原先的标注点消失，即一直保持地图上只有一个标注点。

1、在第五节点击地图显示经纬度和具体地址已经获取了鼠标按下时该点的经纬度和具体地址，只是没有显示该点。

2、如果需要显示点需要将点的数据写入到markers里面，添加的的格式如下：

          let marker = {
            position: [lng, lat],
          };

3、将该点使用javascript的push方法存入到markers中，代码如下：

self.markers.push(marker);

4、因为每次点击都需要将上一个的标注点删除，故在添加标注点之前需要判断makers数组的长度是否为0，不为0则减一，即删除前一个标注点。

          //*****************在鼠标点击处添加标注点*******************//
          if (self.markers.length);
          self.markers.splice(self.markers.length - 1, 1);

5、放代码：
本博客代码在第六小节

七、在地图上显示多个标注点

设计目标：创建多个点坐标，并将这些点显示在地图上*

1、使用规定格式创建多个点坐标对象，代码如下：

      data_position : [
        // 只能使用position
        {position: [121.59996, 31.197646]},
        {position: [121.69996, 31.197646]},
        {position: [121.79996, 31.197646]},
        {position: [121.89996, 31.197646]},
        {position: [121.99996, 31.197646]},
      ],

2、将数据全部存入到markers内，使用push只能将最后一个数据放入到markers中，故添加for循环将数据全部推入到markers中，代码如下：

      for (let x of this.data_position)
      {
        this.markers.push(x);
      }
      console.log(this.markers);

3、添加按钮优化效果，并添加移除点按钮，先判断markers是否为空，不为空则每次按一个移除一个点，代码如下：

      if (!this.markers.length) return;
      this.markers.splice(this.markers.length - 1, 1);

4、全部代码如下：

map.vue

<template>
  <div class="amap-page-container">
    <el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      :events="events"
      :amap-manager="amapManager"
      :plugin="plugin"
      class="amap-demo"
    >
      <!-- 遍历显示 -->
      <el-amap-marker
        v-for="marker in markers"
        :position="marker.position"
        :events="marker.events"
      ></el-amap-marker>
    </el-amap>

    <div class="toolbar">
      position: [{{ lng }}, {{ lat }}] address: {{ address }}
      <button type="button" name="button" v-on:click="addMarker">
        add markers
      </button>
      <button type="button" name="button" v-on:click="removeMarker">
        remove markers
      </button>
    </div>
  </div>
</template>

  <style>
.amap-page-container {
  width: 100%;
  height: 500px;
}
</style>

  <script>
// NPM 方式
import { AMapManager } from "vue-amap";
import VueAMap from "vue-amap";
//import AMap from 'AMap'

let amapManager = new VueAMap.AMapManager();

export default {
  name: "mmap",
  data: function () {
    let self = this;

    return {
      //*******************地图和组件初始化设置**********************//
      amapManager,
      zoom: 12,
      center: [121.59996, 31.197646],
      data_position : [
        // 只能使用position
        {position: [121.59996, 31.197646]},
        {position: [121.69996, 31.197646]},
        {position: [121.79996, 31.197646]},
        {position: [121.89996, 31.197646]},
        {position: [121.99996, 31.197646]},
      ],

      address: "",
      markers: [],
      events: {
        init(o) {
          o.getCity((result) => {
            //result 为地图初始化时所在位置的行政区域信息
            console.log(result);
          });
        },

        //*******************鼠标点击产生确定地址**********************//
        click(e) {
          let { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          //这里是通过高德地图 SDK 完成的
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          var position_xy = [lng, lat];
          console.log(position_xy);

          //*****************在鼠标点击处添加标注点*******************//
          if (self.markers.length);
          self.markers.splice(self.markers.length - 1, 1);
          let marker = {
            position: [lng, lat],
          };
          self.markers.push(marker);

          geocoder.getAddress(position_xy, function (status, result) {
            //console.log(result)
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress;
                console.log(self.address);
                self.$nextTick();
              }
            }
          });
        },

        // //鼠标在点标记上按下时触发事件
        // mousedown() {
        //   var a = "hahaha";
        //   console.log(a);
        // },
      },

      lng: 0,
      lat: 0,
      //*******************卫星+路网+路况**********************//
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              //console.log(o);
            },
          },
        },
      ],
    };
  },

  //*******************在地图上添加点**********************//
  methods: {
    addMarker() {
      // console.log(this.data_position);
      for (let x of this.data_position)
      {
        this.markers.push(x);
      }
      console.log(this.markers);
    },
    removeMarker() {
      if (!this.markers.length) return;
      this.markers.splice(this.markers.length - 1, 1);
    },
  },
};
</script>

写在最后

最近有了一个做网站的项目，我负责项目的地图部分，以上是我在实现功能的过程中学习实现的内容，拿出来和大家分享分享，正所谓前人栽树后人乘凉，我也是在网上查阅了很多前辈的资料，结合自己的实际情况做出来的，希望各位在看了之后可以有所启发有所收获，那也就不枉我花这些时间写这篇博客了。
转载请注明出处。