db_mcyc/xzl-ui/src/views/monitor/map/customerPositionBmap.vue

<template>
  <div>
    <div class="app-container" style="padding-left: 20px;width: 100%;height: 60px;">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="地址:" prop="address">
          <el-autocomplete
            class="inline-input"
            v-model="address"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="距离:" prop="distance">
          <el-select v-model="queryParams.distance" clearable>
            <el-option
              v-for="item in distanceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div id="container" v-bind:style="'width: 100%;border: 1px solid #cecece;height:'+pageHeight*0.797+'px;'">
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      address:"",
      queryParams: {
        address: {},
        distance: "50"
      },
      placeInfo: [
        {value: "", label: ""}
      ],
      distanceOptions: [
        {value: "50", label: "50米"},
        {value: "100", label: "100米"},
        {value: "200", label: "200米"}
      ],
      map: null,
      pageHeight:document.documentElement.clientHeight
    }
  },
  created() {
    setTimeout(()=>{
      this.initMap()
    },100)
  },
  methods: {
    addMarker(points) {
      //循环建立标注点
      var len = points.length;
      for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {
        var point = points[i];
        this.addMarkerPoint(point);
      }
    },
    addTargetMarkerPoint(pointInfo, distance) {
      console.log('pointInfo', pointInfo)
      let pt = new BMap.Point(pointInfo.longitude, pointInfo.latitude);
      let icon=new BMap.Icon(require("@/assets/images/area_icon16x16.png") ,new BMap.Size(16, 16));
      let options = {
        icon:icon
      }
      var marker = new BMap.Marker(pt,options)
      var circle = new BMap.Circle(pt, distance, {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5
      });
      var content =
        '<ul class="map-customer-info">'
        + '<li ><span>名称：</span>' + pointInfo.value + '</li>'
        + '<li ><span>地址：</span>' + pointInfo.address + '</li>'
        + '</ul>';
      marker.addEventListener("mouseover", () => {
        var infoWindow = new BMap.InfoWindow(content);
        marker.openInfoWindow(infoWindow);
      });
      marker.addEventListener("mouseout", () => {
        marker.closeInfoWindow();
      });
      this.map.addOverlay(marker)
      this.map.addOverlay(circle)
      this.map.setZoom(20);
      // 移动到目标点
      this.map.setCenter(pt)
    },
    addMarkerPoint(pointInfo) {
      let pt = new BMap.Point(pointInfo.longitude, pointInfo.latitude);
      var marker = new BMap.Marker(pt)

      this.showInfo(marker, pointInfo)
      this.map.addOverlay(marker)
    },
    showInfo(thisMarker, point) {
      if (!point.clientCode) {
        console.log('未取到值 ...')
        return;
      }
      let pt = new BMap.Point(point.longitude, point.latitude);
      //获取点的信息
      var content =
        '<ul class="map-customer-info">'
        + '<li ><span>许可证号：</span>' + point.clientCode + '</li>'
        + '<li ><span>名称：</span>' + point.shortName + '</li>'
        + '<li ><span>店名：</span>' + point.clientName + '</li>'
        + '<li ><span>电话：</span>' + point.telphonea + '</li>'
        + '<li ><span>地址：</span>' + point.address + '</li>'
        + '<li ><span>客户经理：</span>' + point.cnname + '</li>'
        + '<li ><span>距离：</span>' + this.showDist(parseFloat(point.distance)) + '</li>'
        + '</ul>';
      thisMarker.addEventListener("mouseover", () => {
        var infoWindow = new BMap.InfoWindow(content);
        thisMarker.openInfoWindow(infoWindow);
      });
      thisMarker.addEventListener("mouseout", () => {
        thisMarker.closeInfoWindow();
      });
    },
    showDist(d) {
      return d ? d.toFixed(2) * 1000 + 'M' : '未知';
    },
    initMap() {
      var longitude = 113.450713
      var latitude = 30.366039
      let pt = new BMap.Point(longitude, latitude);
      var marker = new BMap.Marker(pt)

      // 鼠标经过窗口模板
      let tem = `<ul class="map-customer-info">
	                <li>仙桃市烟草专卖局</li>
	                </ul>`;

      marker.addEventListener("mouseover", () => {
        var infoWindow = new BMap.InfoWindow(tem);
        marker.openInfoWindow(infoWindow);
      });
      marker.addEventListener("mouseout", () => {
        marker.closeInfoWindow();
      });

      this.map = new BMap.Map("container", {enableMapClick: false});        // 创建Map实例 命名空间为BMAP
      this.map.centerAndZoom(new BMap.Point(113.465771, 30.368834), 13);  // 初始化地图,设置中心点坐标和地图级别
      this.map.setCurrentCity("仙桃");
      this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      this.map.disableDoubleClickZoom();    //禁用双击放大
      this.map.addOverlay(marker);
    },
    querySearch(queryString, cb) {
      request({
        url: '/api/map/search?key='+queryString,
        method: 'get'
      }).then(function (res) {
        cb(res);
      })
    },
    handleSelect(item){
      if (item) {
        const t=this;
        this.map.clearOverlays();
        this.addTargetMarkerPoint(item,this.queryParams.distance);
        // 查询周围选定距离distance 以内的零售户
        request({
          url: "/api/map/customer/search",
          method: 'post',
          data: {latitude: item.latitude, longitude: item.longitude, count: 10, distance: this.queryParams.distance/1000}
        }).then(function (rs) {
          if (rs && rs.length) {
            t.addMarker(rs);
          } else {
            t.$modal.msgError("未找到附近零售户");
          }
        })
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.BMap_cpyCtrl {
  display: none;
}

.anchorBL {
  display: none;
}
</style>