腾讯地图画区域搜索

总结馆

于 2024-07-11 15:32:50 发布

阅读量207

点赞数 9

文章标签： javascript

本文链接：https://blog.csdn.net/chenhuan9/article/details/140351601

版权

引入腾讯地图

进入腾讯地图位置服务注册一个账号，进入控制台，申请地图所需要的key来获取一系列的权限。
在申请了key后，项目中引入。

<!--    腾讯地图-->
    <script
      charset="utf-8"
      src="https://map.qq.com/api/js?v=2.exp&key = 申请的key值"
    ></script>

3.初始化地图

  // 初始化地图
  <div id="map"></div>
  
  initMap() {
   //定义地图中心点坐标
    let center = new qq.maps.LatLng(22.254515, 113.469689);
    const map = new qq.maps.Map(document.getElementById("map"), {
              center: center, //设置地图中心点坐标
              zoom: 17.2,   //设置地图缩放级别
              rotation: 45, //设置地图旋转角度
         this.handToCircle()
    }）
}
mounted() {
  this.initMap()
}

需求在地图圈出区域，获取位置坐标返给后端调接口，后端根据区域查出所需数据，要实现这个功能，需要在引入地图的地址后面加上libraries=drawing

 data() {
    return {
      overlaysArray: [], //覆盖物容器,用于清除覆盖物
   }
  }
<!--    腾讯地图-->
    <script
      charset="utf-8"
      src="https://map.qq.com/api/js?v=2.exp&key=申请的key值&libraries=drawing"
    ></script>

// 在地图上用图形标圈出范围
 //清除覆盖物
  clearOverlays(overlaysArray) {
   if (overlaysArray) {
       for (i in overlaysArray) {
                this.overlaysArray[i].setMap(null);
          }
      }
    },
 
 //在地图上圈区域的主要方法
    handToCircle() {
            const drawingManager = new qq.maps.drawing.DrawingManager({
              drawingMode: qq.maps.drawing.OverlayType.MARKER,
              drawingControl: true,
              drawingControlOptions: {
                position: qq.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                  qq.maps.drawing.OverlayType.CIRCLE,
                  qq.maps.drawing.OverlayType.RECTANGLE,
                ],
              },
              markerOptions: {
                visible: false,
              },
              circleOptions: {
                fillColor: new qq.maps.Color(255, 208, 70, 0.3),
                strokeColor: new qq.maps.Color(88, 88, 88, 1),
                strokeWeight: 2,
                clickable: false,
              },
              rectangleOptions: {
                fillColor: new qq.maps.Color(255, 208, 70, 0.3),
                strokeColor: new qq.maps.Color(88, 88, 88, 1),
                strokeWeight: 2,
              }
            });
            drawingManager.setMap(this.map);
            console.log("drawingManager =>", drawingManager);

            qq.maps.event.addListener(
              drawingManager,
              "overlaycomplete",
              (event) => {
                if (event.type == "circle") {
                  this.clearOverlays(this.overlaysArray);
                  this.overlaysArray.push(event.overlay);
                  var latLng = event.overlay.getCenter();
                  var newRadius = event.overlay.getRadius();
                  lat = latLng.getLat().toFixed(5);
                  lng = latLng.getLng().toFixed(5);
                  var center = new qq.maps.LatLng(lat, lng);
                  console.log("circle =>", center);
                  var geocoder = new qq.maps.Geocoder();
                  geocoder.getAddress(latLng);
                  //若服务请求失败，则运行以下函数
                  geocoder.setError(function () {
                    alert("出错了，请输入正确的经纬度！！！");
                  });
                } else if (event.type == "rectangle") {
                  this.clearOverlays(this.overlaysArray);
                  this.overlaysArray.push(event.overlay);
                  this.points = "";
                  event.overlay.getPath().forEach((e) => {
                    var lng = e.getLng();
                    var lat = e.getLat();
                    this.points += lng + " " + lat + ",";
                  });
                  this.points = this.points.substring(0, this.points.length - 1);
                  console.log("rectangle =>222", this.points);
                }
              }
            );
          },