vue-cli构建vue项目使用百度地图API

vue-cli构建vue项目使用百度地图API

1. 在百度地图开放平台 注册开发者帐号
2. 申请密钥
3. 在项目的index.html页面添加：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

4. 直接在组件创建一个显示地图的容器

<div id="mapContainer" style="width:100%;height:500px"></div>

5. 在组件写一个调用百度地图API的方法直接调用

mounted() {
    this.bdMap();
  },
methods: {
    bdMap() {
      //创建地图
      let map = new BMap.Map("mapContainer");
      let point = new BMap.Point(113.3309751406,23.1123809784);
      map.centerAndZoom(point, 20); // 创建点坐标
      map.addControl(new BMap.NavigationControl());
      map.enableScrollWheelZoom(true);//允许鼠标滚动缩放
      // 初始化地图， 设置中心点坐标和地图级别
      let marker = new BMap.Marker(point);
      map.addOverlay(marker); //添加覆盖物
      marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
       //添加覆盖物文字
      let label = new BMap.Label("广州塔", {
        offset: new BMap.Size(20, -25)
      });
      marker.setLabel(label);
    }
  }