Vue遇到的bug-03（VUE之使用高德地图API）

步骤一：申请高德地图密钥；
步骤二：在index.html中添加高德地图JavaScript API接口；

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=b15*************f61e08&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

步骤三：在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级；

 externals: {
    "BMap": "BMap"
  }

步骤四：在地图组件中import BMap，否则会出现”BMap undefined”；

import BMap from 'BMap';

步骤五：创建地图对象，在mounted生命周期调用；

    mounted:function(){
                // console.log('4.0 mounted',this.msg);
                this.gdMap(); //高德地图初始化
            },
    methods: {
        ready: function() {
          var map = new AMap.Map('allmap');
          var point = new AMap.Point(104.075796, 30.659684);
          map.centerAndZoom(point, 14);
          map.addControl(new AMap.MapTypeControl());
          map.enableScrollWheelZoom(true);
          map.enableDoubleClickZoom(true);
          var marker = new BMap.Marker(point);
          map.addOverlay(marker);
    }

步骤六：将组件插入父组件中；

最后

以上就是大气小丸子为你收集整理的Vue遇到的bug-03（VUE之使用高德地图API）的全部内容，希望文章能够帮你解决Vue遇到的bug-03（VUE之使用高德地图API）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。