vue项目中使用原生的高德地图API

在vue项目中使用高德地图，大家应该会使用vue-amap组件，但vue-amap中的大部分功能还是要使用高德地图原生API,所以我直接使用了高德地图原生API进行开发。

首先附上高德地图原生API文档地址：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show

1.index.html中添加：注意：使用地图中的各个组件需要在参数plugin中进行配置，例如&plugin=AMap.Geocoder,AMap.MarkerClusterer,AMap.DistrictSearch,AMap.DistrictLayer

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=db6fb9089b4216691cd63dc0bd9daeb7&plugin=AMap.Geocoder"></script>

2.webpack.base.conf.js中在module.exports = {}中添加：

externals: {
  'AMap': 'AMap'
},

3.在需要引入地图的页面中添加：

import AMap from 'AMap'; 

下面的例子是我使用高德地图原生API实现的

 

 

<template>
  <div class="con-box">
    <div id="container" class="mymap">