Question

请不要使用jQuery

我有一个google地图（地图），其标记位于用户当前位置的中心。简单。从那个位置我得到了地图边界。然后，我从map.getBounds（）对what3words（网格区域）运行一个查询，以获取3Mtr网格的坐标，到目前为止，效果很好。然后，我可以绘制矩形网格-到目前为止一切都很好。

但是我无法完成的工作是使每个矩形都可单击，并且每次平移或缩放地图时都会覆盖新的网格。所以问题是：如何使动态网格中的矩形可点击-单击时我要获取其边界，以及如何防止缩放或平移网格“重绘”-对我来说，后者只是删除所有矩形并重新绘制？

const $initializeMap = (pos) => {
  let mapCenter = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)
  map = new google.maps.Map(document.getElementById('map-zone'), {
    zoom: 20,
    center: mapCenter,
    MapTypeId: 'ROADMAP'
  });
  let $currentPositionMarker = new google.maps.Marker({
    map: map,
    draggable: true,
    position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)
  });
  map.panTo(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));

  google.maps.event.addListener(map, 'idle', function(ev) {
    var bounds = map.getBounds();
    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();
    let $str = ne.lng() + ',' + ne.lat() + ',' + sw.lng() + ',' + sw.lat();
    $setRectangles($str);
  });
  google.maps.event.addListener($currentPositionMarker, 'dragend', function(evt) {
    $newPosition(evt.latLng.lat(), evt.latLng.lng());
  });
}

然后

const $setRectangles = ($str) => {
  var $xhr = new XMLHttpRequest();
  $xhr.open("GET", 'https://api.what3words.com/v3/grid-section?bounding-box=' + $str + '&format=json&key={API KEY}');
  $xhr.onreadystatechange = function(e) {
    if ($xhr.readyState == 4 && $xhr.status == 200) {
      let $loc = JSON.parse($xhr.responseText);
      let $rectangle = [];
      for (let $i = 0; $i < $loc.lines.length; $i++) {
        $rectangle.push({
          north: $loc.lines[$i].start.lat,
          south: $loc.lines[$i].end.lng,
          east: $loc.lines[$i].end.lat,
          west: $loc.lines[$i].start.lng
        });
      }
      let $tix = Object.values($rectangle);
      for (let i = 0; i < $tix.length; i++) {
        rectangle = new google.maps.Rectangle({
          strokeColor: '#000000',
          strokeOpacity: 0.5,
          strokeWeight: 0.5,
          fillColor: '#000',
          fillOpacity: 0,
          map: map,
          id: 'r' + i,
          bounds: $tix[i]
        });
        rectangle.setMap(map);
        google.maps.event.addListener(rectangle, 'click', function(i) {
          console.log(this.bounds, this.id, i)
        })
      }
    }
  }
  $xhr.send();
}

我知道矩形应该是“数组”的某种形式，但是无论我尝试哪种方式，都无法获得“正确”的矩形单击，从而无法从实际单击的矩形中提取信息。

如何在Google地图上创建可点击的动态矩形

0 个答案: