如何創建網格是地圖的查看區域

我需要在網格框爲1/4分鐘x 1/4分鐘的地圖上放置網格。 IOWs一個梯形。我使用Delphi和TWebBrowser使用的JavaScript。如何創建網格是地圖的查看區域

現在我正在響應單擊事件來測試繪製單個gridBox，但我將不得不繪製邊界已更改的事件並使用網格填充地圖。

由於1/4分鐘的網格非常小，因此在KML或融合中預先保存一個網格是不現實的，因此我決定在地圖上動態繪製它。

我的網格框將始終落在qtrMinute邊界上。我想確定的是如何創建這些框來填充地圖。

我需要從左上角開始繪製直到左下角，每當邊界被改變時重新繪製它們。

我會限制我的用戶縮放，以免施加過多的繪圖時間。

有人可以幫我用邏輯框來填充屏幕。

感謝施普林格

<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

我得到一個JavaScript錯誤的代碼張貼'未捕獲的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

我在路上，所以我不能測試你的劇本，但我應該但我擺弄它，它證明是要走的路。我用箱子而不是交叉線的原因是我必須在每個箱子上註冊外部數據。我可以使用每箱agaist我的數據質心（haversine查詢），我知道這是可行的。不確定線條網格，但會看到。謝謝。 –

你可能應該在你的問題中包含它。您不一定需要顯示框，您可以計算/創建每個框的邊界，並且如果您在客戶端進行操作，則使用「bounds.contains」（如果您在服務器上執行此操作，則框對線獲勝沒關係）。請注意，haversine查詢會給你一個圓圈，而不是一個盒子。 – geocodezip

如何創建網格是地圖的查看區域

回答

相關問題