Nuxt使用高德地图

事先准备

注册账号并申请Key

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

 

 

 

一、安装

1.npm安装（推荐）

通过 npm install  --save vue-amap 来安装

2.CDN

目前可通过 unpkg.com/vue-amap 获取最新版本的资源。

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

 

二、使用

1.在插件目录plugins下，新建一个vue-map.js文件

import Vue from 'vue'; import VueAMap from 'vue-amap'; Vue.use(VueAMap); // 初始化vue-amap
if (!Vue.prototype.$isServer) { VueAMap.initAMapApiLoader({ // 高德的key
    key: 'your key', // 插件集合
    plugin: ['AMap.Geolocation', 'AMap.Marker', 'AMap.ToolBar', 'AMap.Circle', 'AMap.PolyLine'], uiVersion: '1.0', // 高德 sdk 版本，默认为 1.4.4
    v: '1.4.8' }); }

 

这里的key为事先准备时候注册的key值，填到这里就可以了，如下图所示

 

2.在配置文件nuxt.cofig.js中的plugins里添加刚才写的vue-map.js文件，如下图所示

 

 

 

 3.然后在页面就可以使用el-map来使用地图了，地图的属性通过页面的值来赋予

<template>
  <section style="width: 1000px; height: 800px;">
    <no-ssr>
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :events="events">
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :key="index" :vid="index" :events="marker.events"></el-amap-marker>
        <el-amap-circle :center="circle.center" :radius="circle.radius" :fill-opacity="0.5" fill-color="#ffb5b3" stroke-color="#ffb5b3"></el-amap-circle>
        <el-amap-polyline :path="polyline.path"></el-amap-polyline>
      </el-amap>
    </no-ssr>
  </section>
</template>

<script> import * as _ from 'lodash'; export default { data() { let self = this; return { center: [121.59996, 31.197646], events: { init(map) { let markers = _.cloneDeep(self.markers); markers.forEach((item, index) => { AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) { item = new SimpleMarker({ iconLabel: { innerHTML: index, style: { color: '#fff' } }, iconStyle: '#1995f5', map: map, position: item.position }); }); }); } }, lng: 0, lat: 0, plugin: [{ pName: 'Geolocation', events: { click: (o) => { o.getCurrentPosition((status, result) => { if (result && result.position) { self.lng = result.position.lng; self.lat = result.position.lat; self.center = [self.lng, self.lat]; self.$nextTick(); } }); } }, buttonPosition: 'LT' }], markers: [ { position: [121.59996, 31.197646], events: { click: () => { this.$router.push({path: '/single/250'}); } }, visible: true, clickable: true }, { position: [122.59996, 32.197646], events: { click: () => { this.$router.push({path: '/single/250'}); } }, visible: true, clickable: true } ], circle: { center: [121.59996, 31.197646], radius: 6000 }, polyline: { path: [[121.59996, 31.1976461], [121.5389385, 31.197646]] } }; }, methods: { }, mounted() { }, beforeDestroy() { } }; </script>

 

　　然后 npm run dev 运行程序即可看到效果

 

 

 

 

注意事项：

　　1.两个参考文档

　　  https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install  （amap）

　　  https://lbs.amap.com/api/javascript-api/guide/abc/prepare（高德） 

 

　　2.vue-amap 能够抛开高德原生 SDK 覆盖大多数场景，但对于部分定制化程度较高的场景而言，可能还是需要引入高德原生 SDK 来支持。

　　对于大多数 vue-amap 组件，都有 init 这个 event，参数为高德的实例，通过这样暴露高德实例的方式，开发者能够非常自由地将原生 SDK 和 vue-amap 结合起来使用。

　　若涉及到高德原生 AMap 需要注意的点：

• 确保 vue-amap 的导入名不是 AMap，推荐 import VueAMap from 'vue-amap' 避免和高德全局的 AMap 冲突。
• 若 eslint 报错 AMap is undefined 之类的错误。请将 AMap 配置到 .eslintrc 的 globals 中。

 

<template>
    <div class="amap-page-container">
      <el-amap vid="amapDemo" :center="center" :amap-manager="amapManager" :zoom="zoom" :events="events" class="amap-demo">
      </el-amap>

      <div class="toolbar">
        <button @click="add()">add marker</button>
      </div>
    </div>
  </template>

  <style> .amap-demo { height: 300px;
    }
  </style>

  <script>
    // NPM 方式
    // import { AMapManager } from 'vue-amap';
    // CDN 方式
 let amapManager = new VueAMap.AMapManager(); module.exports = { data: function() { return { zoom: 12, center: [121.59996, 31.197646], amapManager, events: { init(o) { let marker = new AMap.Marker({ position: [121.59996, 31.197646] }); marker.setMap(o); } } }; }, methods: { add() { let o = amapManager.getMap(); let marker = new AMap.Marker({ position: [121.59996, 31.177646] }); marker.setMap(o); } } }; </script>

 

 

 3.如果文档的插件不能满足自己的需求，可以自己自定义添加一些功能，比如切换地图上标注的大小，全屏显示之类的功能，按钮自己添加，然后定位到地图上的相应位置即可

<template>
  <section style="width: 1000px; height: 800px;">
    <no-ssr>
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :events="events">
        <div class="map-range map-icon bg-white map-border text-center cursor-pointer">
          <i class="el-icon-rank text-22 icon-state"></i>
        </div>
        <div class="map-enlarge map-icon map-border bg-white text-center cursor-pointer">
          <p class="icon-state"><i class="iconfont icon-fangda text-22"></i></p>
        </div>
        <el-amap-marker v-for="(marker, index) in markers" :position="marker.position" :key="index" :vid="index" :events="marker.events"></el-amap-marker>
        <el-amap-circle :center="circle.center" :radius="circle.radius" :fill-opacity="0.5" fill-color="#ffb5b3" stroke-color="#ffb5b3"></el-amap-circle>
        <el-amap-polyline :path="polyline.path"></el-amap-polyline>
      </el-amap>
    </no-ssr>
  </section>
</template>

<script> import * as _ from 'lodash'; export default { data() { let self = this; return { center: [121.59996, 31.197646], events: { init(map) { let markers = _.cloneDeep(self.markers); markers.forEach((item, index) => { AMapUI.loadUI(['overlay/SimpleMarker'], function (SimpleMarker) { item = new SimpleMarker({ iconLabel: { innerHTML: index, style: { color: '#fff' } }, iconStyle: '#1995f5', map: map, position: item.position }); }); }); } }, lng: 0, lat: 0, plugin: [{ pName: 'Geolocation', events: { click: (o) => { o.getCurrentPosition((status, result) => { if (result && result.position) { self.lng = result.position.lng; self.lat = result.position.lat; self.center = [self.lng, self.lat]; self.$nextTick(); } }); } }, buttonPosition: 'LT' }], markers: [ { position: [121.59996, 31.197646], events: { click: () => { this.$router.push({path: '/single/250'}); } }, visible: true, clickable: true }, { position: [122.59996, 32.197646], events: { click: () => { this.$router.push({path: '/single/250'}); } }, visible: true, clickable: true } ], circle: { center: [121.59996, 31.197646], radius: 6000 }, polyline: { path: [[121.59996, 31.1976461], [121.5389385, 31.197646]] } }; }, methods: { }, mounted() { }, beforeDestroy() { } }; </script>

<style lang="scss"> .map-icon { height: 35px; width: 35px; position: absolute; top: 20px; border-radius: 5px; overflow: hidden; line-height: 20px; z-index: 99; .icon-state { margin-top: 8px;
  } } .map-enlarge { left: 105px;
  } .map-border { border: 1px solid #b5b9b7;
  } .map-range { left: 55px;
  }
</style>

 

 

 4.动态修改数据以后，地图不会立刻根据数据进行重新渲染，这时候我们需要加一个判断，更新数据前把地图隐藏起来，更新以后通过this.$nextTick(() => {xxx})再显示地图，这样可以解决这个问题

 

5.如果把地图这部分写成一个组件，不同页面根据传入的不同数据来渲染不同的地图的话，进入页面的时候也会出现上面的数据更新导致错误地图的问题，此时可以先不显示地图，然后设置一个定时器，500毫秒后在渲染地图，这样可以避免这个问题，如果使用了定时器，页面销毁前记得清除定时器哦~

 

6.关于坐标点标注，遮挡物样式什么的，可以通过高德地图的UI组件库来进行自定义修改

　　https://lbs.amap.com/api/javascript-api/reference-amap-ui/other/positionpicker

 

如果大佬们有更好的方法和建议，可以在下面回复交流一下哦~

 

 

嗯，就酱~~