vue项目使用高德地图

本来想用vue-amap的,但是一直报错,确实还不够成熟

在index.html文件中引入

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

在webpack.base.conf.js中配置

context: path.resolve(__dirname, '../'),
//加上这段配置
  externals: {
    AMap: "AMap",
  },
  entry: {
    app: './src/main.js'
  },

webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是，所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。
在使用地图的组件中引入

import AMap from 'AMap'

最后就是创建一个地图容器渲染地图

<template>
  <div class="hello">
    <div id="content"> </div>
  </div>
</template>

<script>
  import AMap from 'AMap'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        center: [116.397428, 39.90923]
      }
    },
    mounted(){
      this.GaodeMap()
    },
    methods:{
      GaodeMap(){
        var map = new AMap.Map('content', {
          center: this.center, // [纬度，经度]
          resizeEnable: true,
          zoom: 10
        });
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.Scale())
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 #content{
   width: 1000px;
   height: 1000px;
 }
</style>