0
Надеюсь, я могу объяснить это достаточно хорошо, чтобы иметь смысл. У меня есть карта Google, на которой я помещаю Grid. Сетка представляет собой полилинии долготы и широты линий, которые составляют 1/4 минуты сетки. Это активируется событием Idle.Сверление в Google Maps
Когда пользователь нажимает на карту, вызывается функция createGridBox (event.latLng), создавая gridOverBox внутри GridBox, который отображает конкретную интересующую Grid. Он также создает суб-сетку внутри этой ячейки и делит ее на 8-е.
В моем настоящем коде еще один GridBox также создается, поскольку я произвольно вызываю createMicroGrid для создания smGridOverBox вокруг точки события click. Это просто для тестирования.
То, что я хочу, чтобы случиться:
- Когда происходит событие щелчка, если он находится в GridBox, что не обладает подсетями нарисованные, рисовать их.
- Если подрезка уже существует, создайте smGridOverBox в этой точке, вызвав createMicroGrid (point).
Надеюсь, это не слишком смущает.
Код для создания всех сеток. Отсутствует сценарий для проверки того, имеет ли subGrid уже линии latlon внутри этого поля сетки. Я добавил (прокомментировал) некоторый псевдо-код, который поможет объяснить, что я пытаюсь сделать.
благодаря Springer
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry&sensor=false"></script>
<!--<script type="text/javascript" src="http://melterium.net/label.js"></script>-->
<title>Find your Qtr minute locator</title>
</head>
<body style="height:100%;margin:0">
<!-- Declare the div, make it take up the full document body -->
<div id="map-canvas" style="width: 100%; height: 95%;"></div>
<script type="text/javascript">
var map;
var qtrArray = [];
var Startlatlng;
var llOffset = 0.0666666666666667;
var smallGridOffset = llOffset/8;
var drawGridBox = false;
var drawSmGridBox = false;
var gridline;
var polylinesquare;
var latPolylines = [];
var smLatPolylines = [];
var latLabels = [];
var latMapLabel;
var lngPolylines = [];
var smLngPolylines = [];
var lngLabels = [];
var lngMapLabel;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(34.00, -84.00),
zoom: 10,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
});
/*
var oLat = 90.00;
var oLon = 0.00;
var gridlocator = [new google.maps.LatLng(oLat, oLon)];
*/
google.maps.event.addListener(map, 'click', function (event) {
// if gridOverBox does not exist then <<= pseudo code
// createGridBox(event.latLng)
// else
// createMicroGrid(event.latLng);
createGridBox(event.latLng);
createMicroGrid(event.latLng);
});
DrawGridOn();
google.maps.event.addListener(map, 'idle', function() {
createGridLines(map.getBounds());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function DrawGridOn() {
drawGridBox = true;
}
function DrawGridOff() {
drawGridBox = false;
}
function ClearLastGrid() {
polyline.setMap(null);
}
// function drawPolyLine(from, to, orient)
function createGridLines(bounds) {
for (var i = 0; i < latPolylines.length; i++) {
latPolylines[i].setMap(null);
}
latPolylines = [];
for (var i = 0; i < lngPolylines.length; i++) {
lngPolylines[i].setMap(null);
}
lngPolylines = [];
if (map.getZoom() < 10) return;
var north = bounds.getNorthEast().lat();
var east = bounds.getNorthEast().lng();
var south = bounds.getSouthWest().lat();
var west = bounds.getSouthWest().lng();
// define the size of the grid
var topLat = Math.ceil(north/llOffset) * llOffset;
var rightLong = Math.ceil(east/llOffset) * llOffset;
var bottomLat = Math.floor(south/llOffset) * llOffset;
var leftLong = Math.floor(west/llOffset) * llOffset;
for (var latitude = bottomLat; latitude <= topLat; latitude += llOffset) latPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(latitude, leftLong), new google.maps.LatLng(latitude, rightLong)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
for (var longitude = leftLong; longitude <= rightLong; longitude += llOffset) lngPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(topLat, longitude), new google.maps.LatLng(bottomLat, longitude)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
}
function createGridBox(point) {
// Square limits
// var smPoint = point;
var bottomLeftLat = Math.floor(point.lat()/llOffset) * llOffset;
var bottomLeftLong = Math.floor(point.lng()/llOffset) * llOffset;
var i;
var gridLineSquare = [
new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
new google.maps.LatLng(bottomLeftLat, bottomLeftLong + llOffset), //lwr right
new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong + llOffset), //upr right
new google.maps.LatLng(bottomLeftLat + llOffset, bottomLeftLong), //upr left
new google.maps.LatLng(bottomLeftLat, bottomLeftLong)]; //lwr left
// external.getData(event.latLng);
if (drawGridBox == true) {
gridOverBox = new google.maps.Polyline({
path: gridLineSquare,
geodesic: true,
strokeColor: '#CC0099',
strokeOpacity: 0.5,
strokeWeight: 2
});
for (var latitude = bottomLeftLat + smallGridOffset; latitude <= (bottomLeftLat + llOffset); latitude += smallGridOffset) smLatPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(latitude, bottomLeftLong), new google.maps.LatLng(latitude, bottomLeftLong + llOffset)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
for (var longitude = bottomLeftLong + smallGridOffset; longitude <= bottomLeftLong + llOffset; longitude += smallGridOffset) smLngPolylines.push(new google.maps.Polyline({
path: [
new google.maps.LatLng(bottomLeftLat, longitude), new google.maps.LatLng(bottomLeftLat + llOffset, longitude)],
map: map,
geodesic: true,
strokeColor: '#0000FF',
strokeOpacity: 0.5,
strokeWeight: 1
}));
gridOverBox.setMap(map);
qtrArray.push(gridOverBox);
drawSmGridBox = true;
}
}
function createMicroGrid(point){
// Square limits
var bottomLeftLat = Math.floor(point.lat()/smallGridOffset) * smallGridOffset;
var bottomLeftLong = Math.floor(point.lng()/smallGridOffset) * smallGridOffset;
var i;
var smGridLineSquare = [
new google.maps.LatLng(bottomLeftLat, bottomLeftLong), //lwr left
new google.maps.LatLng(bottomLeftLat, bottomLeftLong + smallGridOffset), //lwr right
new google.maps.LatLng(bottomLeftLat + smallGridOffset, bottomLeftLong + smallGridOffset), //upr right
new google.maps.LatLng(bottomLeftLat + smallGridOffset, bottomLeftLong), //upr left
new google.maps.LatLng(bottomLeftLat, bottomLeftLong)]; //lwr left
// external.getData(event.latLng);
if (drawSmGridBox == true) smGridOverBox = new google.maps.Polyline({
path: smGridLineSquare,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 1
});
smGridOverBox.setMap(map);
map.setZoom(14);
}
</script>
</body>
</html>
Какие проблемы возникают при реализации кода, необходимого для удовлетворения ваших требований? – geocodezip
@geocodezip мне нужен эквивалент // если gridOverBox не существует, то << = псевдокод // createGridBox (event.latLng) // еще // createMicroGrid (event.latLng); Что я пытаюсь определить, если точка, на которую пользователь нажимает, делает smGridLineSquare уже существующим? Если это так, запустите createMicroGrid (event.latLng) для этой точки. Я не могу использовать containsLocation, поскольку внутренний ящик состоит из полилиний lat/lon, а не полигонов. (если нет способа конвертировать решетки lat/lon в полигоны). –
Как вы планировали обнаружить, если gridOverBox не существует – geocodezip