android - Android Google Map-如何将地图划分为4个象限并知道标记象限的位置

Question

我有一张谷歌地图，上面有一些标记。标记已在地图上渲染，并且标记是根据特定类别放置的。这些类别是地图上的象限。

现在，在用户单击地图上的标记后，我需要知道标记在哪个象限中。

这是我到目前为止所要做的。我以为我会得到这样的 4 个象限：

val screenLoc = googleMap.projection.toScreenLocation(marker.position)

val q1 = googleMap.projection.visibleRegion.farLeft
val q2 = googleMap.projection.visibleRegion.farRight
val q3 = googleMap.projection.visibleRegion.nearLeft
val q4 = googleMap.projection.visibleRegion.nearRight

但我有点卡住了，我怎么会知道标记在哪个象限。

标签： androidgoogle-mapsandroid-maps-v2

Answer 1

这是一个使用 Javascript API 的工作代码片段。这段代码中没有什么是你不能用 Android API 做的（对不起，我不是在 Android 上开发的）。逻辑将完全相同。

我所做的（也参见代码中的注释）是：

1. 获取地图边界和中心点
2. 提取西南和东北坐标
3. 根据这些坐标创建 4 个矩形
4. 创建一些标记
5. 单击标记时，检查它是否在 4 个矩形之一内并输出一条消息

希望这可以帮助。

注意：矩形当然可以是透明的，如果你需要一个可见的分割，你可以为矩形设置一个笔触或用折线分割地图。

var map;
var rectangles = [];

function initialize() {

  var center = new google.maps.LatLng(0, 0);

  var mapOptions = {
    zoom: 10,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  // Set markers and rectangles once the map is idle
  google.maps.event.addListenerOnce(map, 'idle', function() {

    // Get map bounds, north-east and south-west coords
    var bounds = map.getBounds();
    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();

    // Create a few markers to test
    setMarker(new google.maps.LatLng(-0.05, -0.05));
    setMarker(new google.maps.LatLng(0.05, -0.05));
    setMarker(new google.maps.LatLng(0.05, 0.05));
    setMarker(new google.maps.LatLng(-0.05, 0.05));

    // Define 4 rectangles based on map bounds and center
    setRectangle(new google.maps.LatLngBounds(
      new google.maps.LatLng(center.lat(), sw.lng()),
      new google.maps.LatLng(ne.lat(), center.lng()),
    ), 'blue');

    setRectangle(new google.maps.LatLngBounds(
      new google.maps.LatLng(center.lat(), center.lng()),
      new google.maps.LatLng(ne.lat(), ne.lng()),
    ), 'yellow');

    setRectangle(new google.maps.LatLngBounds(
      new google.maps.LatLng(sw.lat(), sw.lng()),
      new google.maps.LatLng(center.lat(), center.lng()),
    ), 'green');

    setRectangle(new google.maps.LatLngBounds(
      new google.maps.LatLng(sw.lat(), center.lng()),
      new google.maps.LatLng(center.lat(), ne.lng()),
    ), 'red');
  });

}

function setMarker(latLng, title) {

  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: title,
    draggable: true
  });

  new google.maps.event.addListener(marker, 'click', function() {

    checkRectangleContains(this.position);
  });
}

function setRectangle(bounds, color) {

  var rectangle = new google.maps.Rectangle({
    strokeWeight: 0,
    fillColor: color,
    fillOpacity: 0.35,
    map: map,
    bounds: bounds,
    _reference: color
  });

  rectangles.push(rectangle);
}

function checkRectangleContains(markerCoords) {

  for (var i = 0; i < rectangles.length; i++) {

    // Check if the rectangle bounds contain the marker position
    if (rectangles[i].getBounds().contains(markerCoords)) {

      // Output message
      document.getElementById('rectangle-contains').innerHTML = 'This point is contained within ' + rectangles[i]._reference + ' rectangle.';
    }
  }
}

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<div id="rectangle-contains"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>