在vue项目中引入高德地图及其UI组件的方法

<script type="text/javascript" src="http://webapi.amap./maps?v=1.3&key=你的API key"></script>

<script src="//webapi.amap./ui/1.0/main.js"></script>

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

<template>
 <div id="container" class="mymap"></div>
</template>
<script>

import AMap from 'AMap'; //在页面中引入高德地图

export default {
 mounted(){
  this.loadmap();  //加载地图和相关组件
 },
 methods: {
  loadmap(){
  const map = new AMap.Map('container', {
   zoom: 9
  });
  }
 }
}
</script>
<style scoped>
 .mymap{
  width: 300px;
  height: 300px;
 }
</style>

loadmap(){
 const map = new AMap.Map('container', {
  zoom: 9
 });
 AMapUI.loadUI(...)  //加载UI组件
}