如何在Vue中使用高德地图

在一个Vue项目中,index.html是这个项目要显示的页面，其他什么组件都是往里面注入的。想要使用高德地图提供的API我们只需要在中加入一下这句话即可：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=your key"></script>

现在就可以在vue项目中使用高德地图了。
根据高德地图所提供的文档操作

<div id="container"></div>

以上这样，地图便能在以id为container的div中显示了。但是这个container必须是body下根结点地图才会显示。

通过Vue提供的mounted方法，在mounted方法中对地图进行初始化便能在想要的组件中创建地图

<template>
  <div id="container">

  </div>
</template>

<script>
export default {
  mounted() {
    let Amap = new AMap.Map('container',{
      center:this.center,
    });
   }
}