1.vue-cli中使用

1 找到builds文件夹下的 webpack.base.conf.js 

2 找到里面的 module.exports 添加 

externals: {

     'AMap': 'AMap'

}

3 在index.heml中引入

<script src="https://webapi.amap.com/maps?v=1.4.10&key=您申请的key"></script>

4 在项目中引入（地图类型可以随便更改）

<div id="container" style="width:750px;height:450px;position:relative;"></div>(宽高自己添加，必须要写)

<script>
import AMap from "AMap"
    export default{
        data(){
           return{
                title:"联系我们"
           } 
        },
        methods: {
            init: function () {
                var map = new AMap.Map('container', {
                    resizeEnable: true,
                    zoom:11,
                    center: [116.397428, 39.90923]
                });
                    // 构造点标记
                var marker = new AMap.Marker({
                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [121.527246,31.226786]
                    
                });
                // 构造矢量圆形
                var circle = new AMap.Circle({
                    center: new AMap.LngLat("121.527246", "31.226786"), // 圆心位置
                    radius: 30,  //半径
                    strokeColor: "#b1d0f2",  //线颜色
                    strokeOpacity: 1,  //线透明度
                    strokeWeight: 1,  //线粗细度
                    fillColor: "#d7e4f0",  //填充颜色
                    fillOpacity: 0.8 //填充透明度
                });
                
                // 将以上覆盖物添加到地图上
                // 单独将点标记添加到地图上
                // map.add(marker);
                // add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上
                map.add([marker,circle]);
                map.setFitView();
            }
        },
        mounted(){
            this.init(); 
            this.$emit('toparent',this.title)
        }
    }
</script>

查看效果（http://www.netwisdom.cn/html/contactus.html）