百度地图自封组件的使用

1. 注册和引入脚本

• 申请ak: http://lbs.baidu.com/apiconsole/key?application=key

• 引入js： 直接在index.html中引入下面的脚本

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

• 复制已经封装好的baidumap.vue

<template>
  <div>
    <slot></slot>
  
    <div ref="map" :style="mapStyle" style="margin-top:5px;"></div>
  </div>
</template>
<script>
var BMap=window.BMap; 

var map, local;
export default {
  props: [
    "mapStyle",
    "controllers",
    "wheelZoom",
    "suggestId",
    "level",
    "lng",
    "lat"
  ],
  data() {
    return {
      options: {
        mapStyle: this.mapStyle,
        controllers: this.controllers ==undefined? true:this.controllers,
        wheelZoom: this.wheelZoom ==undefined? true:this.wheelZoom,
        suggestId: this.suggestId,
        lng: this.lng || 118.156801,
        lat: this.lat || 24.485408,
        cursor: this.cursor || "default",
        level: this.level || 12
      }
    };
  },
  mounted() {
    
    var ele = this.$refs.map; 
    
    map = new BMap.Map(ele); //创建地图
    console.log(this.options.wheelZoom)
    if (this.options.wheelZoom) {
      map.enableScrollWheelZoom(); //  开启鼠标滚轮缩放
    }

    if (this.options.suggestId) {
      var ac = new BMap.Autocomplete({
        //建立一个自动完成的对象
        input: document.getElementById(this.options.suggestId),
        location: map
      });

      ac.addEventListener("onconfirm", e => {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        var myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        this.$emit("suggestSelect", myValue, _value);
      });
    }
    map.centerAndZoom(
      new BMap.Point(this.options.lng, this.options.lat),
      this.options.level
    ); //设置中心
    map.setDefaultCursor(this.options.cursor); //设置默认鼠标样式
    map.addEventListener("click", event => {
      this.$emit("click", event);
    }); //监听点击
    if (this.options.controllers) {
    //   var top_left_control = new BMap.ScaleControl({
    //     anchor: BMAP_ANCHOR_TOP_LEFT
    //   }); // 左上角，添加比例尺
      var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
    //  map.addControl(top_left_control); //添加控件
      map.addControl(top_left_navigation); //添加控件
    }
    local = new BMap.LocalSearch(map, {
      renderOptions: { map: map }
    });
    var loaded = function() {
      var c = document.getElementsByClassName("BMap_cpyCtrl");
      var c2 = document.getElementsByClassName("anchorBL");
      c[0].parentElement.removeChild(c[0]);
      c2[0].parentElement.removeChild(c2[0]);
      map.removeEventListener("tilesloaded", loaded);
    };
      map.addEventListener("tilesloaded", loaded);
  },
  methods: {
    center: function(o) {
      map.centerAndZoom(
        new BMap.Point(o.lng || this.options.lng, o.lat || this.options.lat),
        o.level||this.options.level
      ); //设置中心
    },
    clearMarker: function() {
      map.clearOverlays();
    },
    addMarker: function(o) {
      var marker = new BMap.Marker(new BMap.Point(o.lng, o.lat));
      map.addOverlay(marker);
    },
    search: function(value) {
      local.search(value);
    },
    map: function() {
      return map;
    },
    removeMarker: function(point) {
      var allOverlay = map.getOverlays();
      for (var i = 0; i < allOverlay.length; i++) {
        //删除指定经度的点
        if (allOverlay[i] instanceof BMap.Marker) {
          if (
            allOverlay[i].getPosition().lng == point.lng &&
            allOverlay[i].getPosition().lat == point.lat
          ) {
            map.removeOverlay(allOverlay[i]);
          }
        }
      }
    },
    getSuggessPoint: function(options) {
      var local = new BMap.LocalSearch(map, {
        //智能搜索
        onSearchComplete: function myFun() {
          var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          options.success(pp);
        }
      });
      local.search(options.address);
    }
  }
};
</script>

• 使用组件

<template>
    <div>
        <baidumap mapStyle="width:500px;height:500px"></baidumap>
    </div>
</template>
<script>
import baidumap from './common/baidumap'
export default {
    components: {
        baidumap
    }
}
</script>

文档

属性

方法

事件

<template>
    <div>
        <baidumap ref="map"  suggestId="search"  mapStyle="width:500px;height:500px">
            <input type="text" id="search">
        </baidumap>

        <button @click="$refs.map.center({lng:118,lat:24,level:14})"> 居中   </button>
         <button @click="$refs.map.addMarker({lng:118,lat:24})"> 标点 </button>
          <button @click="$refs.map.clearMarker()"> 清除标点 </button>
          <button @click="$refs.map.search('厦门软件园')">搜索</button>
          <button @click="m">获取地理坐标</button>
    </div>
</template>
<script>
import baidumap from './common/baidumap'
export default {
    components: {
        baidumap
    },
    methods: {
        m(){
            this.$refs.map.getSuggessPoint({
                address:'厦门软件园三期',
                success:(point)=>{
                    console.log(point)
                    this.$refs.map.addMarker(point)
                }
            })
        }
    }
}
</script>

练习

  data(){
      return {
          form:{
              lng:undefined,
              lat:undefined,
              address:undefined
          }
      }
  },

1. 在搜索框输入地址并且选择后，将坐标和地址都设置到form上面去。
2. 点击地图，将坐标更新到form上面
3. 指定一个form数据，将地图根据form数据去设置标点，搜索框上的地址也要按照form中的address去设定