Android Google 地图-如何将地图分成4个象限并知道标记象限位置
Android Google Map- how to divide map into 4 quadrants and know marker quadrant position
我有一张 google 地图,我在 上有一些标记。标记已经呈现在地图上,并且标记是根据特定类别放置的。这些类别是地图上的象限。
现在,当用户点击地图上的标记后,我需要知道该标记位于哪个象限。
这是我目前要做的。我以为我会得到这样的 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
但是我有点卡住了我怎么知道标记是哪个象限的。
这是一个使用 Javascript API 的工作代码片段。这段代码中没有您不能使用 Android API 做的事情(抱歉,我不在 Android 上开发)。逻辑完全一样。
我所做的(也请参阅代码中的注释)是:
- 获取地图边界和中心点
- 提取south-west和north-east坐标
- 根据这些坐标创建 4 个矩形
- 创建几个标记
- 单击标记时,检查它是否在 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>
我有一张 google 地图,我在 上有一些标记。标记已经呈现在地图上,并且标记是根据特定类别放置的。这些类别是地图上的象限。
现在,当用户点击地图上的标记后,我需要知道该标记位于哪个象限。
这是我目前要做的。我以为我会得到这样的 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
但是我有点卡住了我怎么知道标记是哪个象限的。
这是一个使用 Javascript API 的工作代码片段。这段代码中没有您不能使用 Android API 做的事情(抱歉,我不在 Android 上开发)。逻辑完全一样。
我所做的(也请参阅代码中的注释)是:
- 获取地图边界和中心点
- 提取south-west和north-east坐标
- 根据这些坐标创建 4 个矩形
- 创建几个标记
- 单击标记时,检查它是否在 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>