vue：高德地图的使用

Mosowe

已于 2022-05-28 09:16:23 修改

阅读量1.2w

点赞数 2

分类专栏： vue 文章标签： vue使用高德地图

于 2019-04-04 10:53:10 首次发布

本文链接：https://blog.csdn.net/skyblacktoday/article/details/89011455

版权

vue 专栏收录该内容

56 篇文章 8 订阅

订阅专栏

1.安装

npm安装：

npm install vue-amap --save

CDN：

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>

2.配置

main.js：

import Vue from 'vue';
import VueAMap from 'vue-amap'; // 高德


Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '*******你的key*********',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'],
  v: '1.4.4'
});

3.使用地图

相关参数请参考：组件 | vue-amap

html：

<el-amap vid="amap" :plugin="plugin" :events="events" class="amap" :center="center" :zoom="zoom">
  <el-amap-marker :position="center" vid="amapMarker"></el-amap-marker>
</el-amap>

el-amap-marker：地图的标记点，不需要可以不用写，我这里需要

js：

data () {
    let self = this;
    return {
      nearbyInfo: [], // 周边信息---高德反馈（周边建筑信息）
      addressInfo: '', // 城市信息---高德反馈（省市区、adcode）
      center: [0, 0], // 高德地图中心点
      zoom: 15, // 地图缩放
      events: {
        'click': (e) => { // 点击地图的时候，获取点击的经纬度，并将地图中心点移自此处
          let m = e.lnglat;
          self.addrInput = '';
          self.center = [m.lng, m.lat];
          self.GDmapGetInfoOfNearby(m.lng, m.lat, self); // 获取周边信息
        }
      },
      plugin: [
        {
          pName: 'Geolocation',
          noIpLocate: 1, // ios11： 禁止ip定位：ios11之后默认是ip定位，参数为1则是禁止ip定位
          events: {
            init: (o) => {
              self.GDinit(o, self); // 获取当前位置
            }
          }
        }
      ]
    };
  },

使用‘Geolocation’的时候一定要在前面的配置中写上“AMap.CircleEditor”，否则不生效。

/* 初始化定位当前位置 */
    GDinit (o, self) {
      o.getCurrentPosition((status, result) => {
        console.log(status, result);
        if (status === 'complete' && result.info === 'SUCCESS') {
          let lat = result.position.lat;
          let lng = result.position.lng;
          self.center = [lng, lat];
          self.GDmapGetInfoOfNearby(lng, lat, self); // 获取周边信息
        }
      });
    },

/* 获取周边建筑信息 */
    GDmapGetInfoOfNearby (lng, lat, self) {
      // 这里通过高德 SDK 完成。
      let geocoder = new AMap.Geocoder({ 
        radius: 1000,
        extensions: 'all',
        poitype: ''
      });
      geocoder.getAddress([lng, lat], (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          if (result && result.regeocode) {
            console.log(result);
            self.$nextTick();
          }
        }
      });
    },

radius：搜索半径，

poitype:返回附近POI类型(周边信息)，相关地址：地理/逆地理编码-API文档-开发指南-Web服务 API | 高德地图API，

文档下载地址：相关下载-Web服务 API | 高德地图API

extensions：返回结果控制，参数为 all 时poitype才生效

4.地图搜索功能

<el-amap-search-box class="search-box" :on-search-result="GDonSearchResult"></el-amap-search-box>

    /* 搜索结果回调函数 */
    GDonSearchResult (e) {
      console.log(e);
      this.center = [e.lng, e.lat];
      this.GDmapGetInfoOfNearby(e[0].lng, e[0].lat, this);
    }