Как создать сетку - это область просмотра карты

Мне нужно поместить сетку на карту, где квадрат сетки составляет 1/4 минуты x 1/4 минуты. IOW - трапеция. Я использую JavaScript с использованием Delphi и TWebBrowser.Как создать сетку - это область просмотра карты

Прямо сейчас я отвечаю на событие click, чтобы проверить нарисовать один gridBox, но мне нужно будет нарисовать событие Bounds changed и заполнить карту сеткой.

, так как сетка размером 1/4 мин довольно мала, нецелесообразно иметь одну предварительно сохраненную в KML или слиянии, поэтому я решил ее динамически нарисовать на карте.

Мои сетки всегда будут падать на границу qtrMinute. я пытаюсь определить, как создать эти поля для заполнения карты.

Мне нужно будет начать в левом верхнем углу и нарисовать их до нижнего левого края, перерисовать их, когда границы будут изменены.

Я ограничу масштаб пользователя, чтобы не налагать чрезмерного времени на рисование.

помогло бы мне с логикой заполнить экран сетчатыми коробками.

благодаря Springer

<html> 
<head> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=geometry&amp;sensor=false"></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 linesArray = []; 
      var Startlatlng; 

      var drawGridBox = false; 
      var gridline; 
      function initialize() { 


       map = new google.maps.Map(document.getElementById('map-canvas'), { 
        center: new google.maps.LatLng(33.00, -100.00), 
        zoom: 10, 
        streetViewControl: true, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        scaleControl: true 
       }); 


       var llOffset = 0.0666666666666667; 
       var oLat = 34.00; 
       var oLon = -100.00; 

       var gridlocator = [ new google.maps.LatLng(oLat, oLon)]; 

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


/*     google.maps.event.addListener(map, 'bounds_changed', DrawLine); */ 



         // Square limits 
        var bottomLeftLat = Math.floor(event.latLng.lat()/llOffset) * llOffset; 
        var bottomLeftLong = Math.floor(event.latLng.lng()/llOffset) * llOffset; 
        var bounds = new google.maps.LatLngBounds(); 
        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), 
        new google.maps.LatLng(bottomLeftLat, bottomLeftLong)]; 


        for (i = 0; i < gridLineSquare.length; i++) { 
         bounds.extend(gridLineSquare[i]); 
        } 

        external.getData(event.latLng);  
        if (drawGridBox == true) {    
        polyline = new google.maps.Polyline({ 
         path: polylinesquare,    
         geodesic: true,     
         strokeColor: '#0000FF', 
         strokeOpacity: 0.5,  
         strokeWeight: 1   
        });       

        polyline.setMap(map);   
        qtrArray.push(polyline);}  

       }); 

      } 





    google.maps.event.addDomListener(window, 'load', initialize); 

    function DrawGridOn() {drawGridBox = true} 
    function DrawGridOff() {drawGridBox = false} 


    function ClearLastGrid(){polyline.setMap(null); } 


     </script> 
    </body> 

</html>

источник

2015-07-12 Meta Mussel

Я получаю ошибку яваскрипта с кодом, как разместил 'неперехваченного ReferenceError: mArray не defined' – geocodezip

я удалил эту часть сценария. Я попытался удалить весь скрипт, который не касался этого вопроса, но некоторые остались. –

Есть и другие проблемы. Пожалуйста, напишите [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует текущее состояние вашего кода. – geocodezip

Было бы более эффективным, чтобы нарисовать сетку в качестве полных ломаных линий, а не коробки:

function createGridLines(bounds) { 
    // remove any existing lines from the map 
    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 = []; 
    // don't add the lines if the boxes are too small to be useful 
    if (map.getZoom() <= 6) 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) { 
     // lines of latitude 
     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) { 
     // lines of longitude 
     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 
     })); 
    } 
}

proof of concept fiddle

фрагмент кода:

var map; 
 

 
var qtrArray = []; 
 
var linesArray = []; 
 
var Startlatlng; 
 
var llOffset = 0.0666666666666667; 
 

 
var drawGridBox = false; 
 
var gridline; 
 
var polylinesquare; 
 
var latPolylines = []; 
 
var lngPolylines = []; 
 
var bounds = new google.maps.LatLngBounds(); 
 

 
function initialize() { 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    center: new google.maps.LatLng(33.00, -100.00), 
 
    zoom: 10, 
 
    streetViewControl: true, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    scaleControl: true 
 
    }); 
 

 

 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
 
    createGridLines(map.getBounds()); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 

 
function createGridLines(bounds) { 
 
    // remove any existing lines from the map 
 
    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 = []; 
 
    // don't add the lines if the boxes are too small to be useful 
 
    if (map.getZoom() <= 6) 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) { 
 
    // lines of latitude 
 
    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) { 
 
    // lines of longitude 
 
    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 
 
    })); 
 
    } 
 
}

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<!-- Declare the div, make it take up the full document body --> 
 
<div id="map-canvas" style="width: 100%; height: 95%;"></div>

источник

2015-07-12 20:47:58 geocodezip

Я нахожусь в дороге, поэтому я не могу проверить ваш сценарий так же хорошо, как и следовало бы, но я поиграл в него, и это оказалось возможным. Причина, по которой я пошел с коробкой, а не с перекрестными линиями, заключалась в том, что мне придется регистрировать каждый ящик с помощью внешних данных. Я могу сделать это, используя центроид каждого окна, агитировать мои данные (запрос haversine), и я знаю, что это работает. Не уверен в сетке, но увидите. Благодарю. –

Возможно, вы должны были включить это в свой вопрос. Вам необязательно отображать поля, вы можете вычислять/создавать границы для каждого окна и использовать 'bounds.contains', если вы делаете это на клиенте (если вы делаете это на сервере, поле против выигрыша линии Не важно. Обратите внимание, что запрос haversine даст вам круг, а не поле. – geocodezip

Как создать сетку - это область просмотра карты

ответ

Смежные вопросы