---- AI试用 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

vue-baidu-map(未整理)

前端开发 蚂蚁 2658℃ 0评论

https://dafrok.github.io/vue-baidu-map/#/zh/index
vue-baidu-map 使用("踩坑")心得

<el-form-item label="详细地址" >
        <el-autocomplete
          v-model="origin.detailAddress"
          :fetch-suggestions="mapSearch"
          placeholder="请输入详细地址"
          style="width: 100%"
          :trigger-on-focus="false"
          @select="mapSelect"
        />
      </el-form-item>
      <el-form-item>
          <baidu-map  class="map" :center="center" :zoom="zoom" @ready="handlermap"
          :scroll-wheel-zoom="true"
          @click="clickEvent"
          ak="33B192o1jPaqOHASGGAIkoMuwi8WXXX">
            <!-- 地图控件位置 -->
              <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              <!-- 获取城市列表 -->
              <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
              <!-- 定位当前位置 -->
              <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>
              <!-- 地图容器 -->
              <bm-view :style="{width:'100%',height: '500px'}"></bm-view>
          </baidu-map>
      </el-form-item>

return

center: {lng: 106.632713, lat: 26.653157},
        zoom: 12,
        mapVisible:false,
        clientHeight:document.documentElement.clientHeight-90, // 设置屏幕高度
        mapLocation: {
          address: undefined,
          coordinate: undefined
        }

methods

handlermap ({BMap, map}) {
        let _this = this;	// 设置一个临时变量指向vue实例;
        var geolocation = new BMap.Geolocation();
        this.BMap = BMap;
        this.map = map;
        geolocation.getCurrentPosition(function(r){
          // console.log(r);
          _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
          // console.log('_this.center',_this.origin);
          if(_this.origin.latitude&&_this.origin.longitude){
            let transqq = qqMapTransBMap(_this.origin.longitude,_this.origin.latitude);
            // console.log('transqq',transqq);
            _this.center = {lng:transqq.lng, lat: transqq.lat};
          };
          let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
          let myMarker = new BMap.Marker(new BMap.Point(_this.origin.longitude, _this.origin.latitude),{icon: Icon_0});
          map.addOverlay(myMarker);
          _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
          _this.initLocation = true;
        },{enableHighAccuracy: true})
          window.map = map;
      },
      //点击地图监听
      clickEvent(e){
        map.clearOverlays();
        let Icon_0 = new BMap.Icon("static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
        var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
        map.addOverlay(myMarker);
        //用所定位的经纬度查找所在地省市街道等信息
        var point = new BMap.Point(e.point.lng, e.point.lat);
        var gc = new BMap.Geocoder();
        let _this = this;
        gc.getLocation(point, function (rs) {
          var addComp = rs.addressComponents;
          console.log(rs);//地址信息
          _this.origin.provinceName = rs.addressComponents.province;
          _this.origin.cityName = rs.addressComponents.city;
          _this.origin.countyName = rs.addressComponents.district;
          _this.origin.detailAddress = rs.address;
        });
        //转为高德坐标
        let transGaode = bMapTransQQMap(e.point.lng,e.point.lat);
        this.origin.longitude = transGaode.lng;
        this.origin.latitude = transGaode.lat;
        // this.origin.longitude = e.point.lng;
        // this.origin.latitude = e.point.lat;
      },
      //定位成功回调
      getLoctionSuccess(point, AddressComponent, marker){
        // map.clearOverlays();
        // let Icon_0 = new BMap.Icon("/static/zuobiao.gif", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
        // var myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
        // map.addOverlay(myMarker);
        // this.company.longitude = point.point.lng;
        // this.company.latitude = point.point.lat;
      },
      findlocation(){
        this.$emit("findlocdata",this.company)
        this.mapVisible = false
      },
      mapShow(){
        this.mapVisible = true
      },
      mapSearch(queryString, cb) {
      var that = this
      var myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(queryString, function(point) {
        if (point) {
          that.mapLocation.coordinate = point
          that.makerCenter(point)
        } else {
          that.mapLocation.coordinate = null
        }
      }, this.locationCity)
      var options = {
        onSearchComplete: function(results) {
          if (local.getStatus() === 0) {
            // 判断状态是否正确
            var s = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              var x = results.getPoi(i)
              var item = { value: x.address + x.title, point: x.point }
              s.push(item)
              cb(s)
            }
          } else {
            cb()
          }
        }
      }
      var local = new this.BMap.LocalSearch(this.map, options)
      local.search(queryString)
    },
    mapSelect(e) {
      // console.log('e',e.point);
      this.getMapInfo(e.point);
      //转为高德坐标
      let transGaode = bMapTransQQMap(e.point.lng,e.point.lat);
      this.origin.longitude = transGaode.lng;
      this.origin.latitude = transGaode.lat;
      var { point } = e
      this.mapLocation.coordinate = point
      this.makerCenter(point)
    },
      makerCenter(point) {
        if (this.map) {
          this.map.clearOverlays()
          this.map.addOverlay(new this.BMap.Marker(point))
          this.center.lng = point.lng
          this.center.lat = point.lat
          this.zoom = 15
        }
      },
      getMapInfo(point){
        //用所定位的经纬度查找所在地省市街道等信息
        var point = new BMap.Point(point.lng, point.lat);
        var gc = new BMap.Geocoder();
        let _this = this;
        gc.getLocation(point, function (rs) {
          var addComp = rs.addressComponents;
          // console.log('getMapInfo',rs);//地址信息
          _this.origin.provinceName = rs.addressComponents.province;
          _this.origin.cityName = rs.addressComponents.city;
          _this.origin.countyName = rs.addressComponents.district;
          _this.origin.detailAddress = rs.address;
        });

      },

地图经纬度转换

// 将百度地图经纬度转换为腾讯/高德地图经纬度
export function bMapTransQQMap(lng, lat) {
    let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    let x = lng - 0.0065;
    let y = lat - 0.006;
    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
    let lngs = z * Math.cos(theta);
    let lats = z * Math.sin(theta);
    
    return {
          lng: lngs,
          lat: lats     
    }  
}

// 将腾讯/高德地图经纬度转换为百度地图经纬度
export function qqMapTransBMap(lng, lat) {
    let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
    let x = lng;
    let y = lat;
    let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
    let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
    let lngs = z * Math.cos(theta) + 0.0065;
    let lats = z * Math.sin(theta) + 0.006;
   
    return {
          lng: lngs,
          lat: lats 
    } 
}

转载请注明:有爱前端 » vue-baidu-map(未整理)

喜欢 (4)or分享 (0)