步骤一:申请高德地图密钥;
步骤二:在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);
    }

步骤六:将组件插入父组件中;

Logo

前往低代码交流专区

更多推荐