Làm thế nào một số LatLng có thể được sử dụng để đặt điểm đánh dấu trên bản đồ Google, nhưng không được vẽ một Đa giác?

Question

Khoảng một tuần trước, tôi gặp sự cố: trên bản đồ do Google cung cấp tùy chỉnh, các Đa giác của tôi sẽ không hiển thị, trong khi các điểm đánh dấu cho cùng tọa độ hoàn toàn ổn. Mặc cho những nỗ lực của tôi với API Google Maps, có vẻ như tôi không thể tìm thấy lý do.

Here is a link to a screenshot of the map. mũi tên màu tím và con số này là bổ sung của tôi, họ cho thấy:

1. Các google.maps.Marker tôi có thể đặt ở các cạnh của "khu vực" của tôi.
2. Tạo phẩm được tạo bởi mã google.maps.Polygon. Nó có màu đỏ như mong đợi, nhưng hoàn toàn không đúng chỗ và lạ lùng.

Đây là một phần của mã nơi Markers và đa giác được tạo ra:

var regionData = tecMap.regions[r]; 
var regionMapMarkers = new google.maps.MVCArray(); 

for (c in regionData.coords) { 
    var point = projection.worldToMap(regionData.coords[c]); 
    debugRegionPoints.push(point); 
    var thisLatLng = projection.fromPointToLatLng(point); 
    debugRegionLatLngs.push(thisLatLng); 
    regionMapMarkers.push(thisLatLng); 
} 

regionMapMarkers.forEach(function(latLng, m){ 
    var marker = new google.maps.Marker({  
     position: latLng, 
     map: map, 
     title: '', 
     optimized: false 
    }); 
    regionCorners.push(marker); 
}); 

var paths = new google.maps.MVCArray(); 
paths.push(regionMapMarkers); 

var region = new google.maps.Polygon({ 
    fillColor: "#FF0000", 
    fillOpacity: 0.35, 
    map: map, 
    paths: paths, 
    strokeColor: "#FF0000", 
    strokeOpacity: 0.8, 
    strokeWeight: 2  
}); 
regionPolys.push(region); 

Nếu bạn đang băn khoăn về các mảng của mảng, đó là tất cả ngang bằng với các Google Maps Javascript API.

Nếu bạn muốn xem bản đồ và các tập lệnh có liên quan, bạn có thể find it here. Đoạn mã là trong Scripts/tectonicus.js, bắt đầu từ dòng 659.

[Chỉnh sửa] Một số thông tin gỡ lỗi:

Nó có vẻ là một vấn đề rendering, không phải là một "tính toán" một. Từ bảng điều khiển firebug, trong bản đồ tôi liên kết, cả hai

regionPolys[0].getPath().getArray(); 

và

for (i in regionCorners) {console.log(regionCorners[i].getPosition())}; 

sẽ trở lại

P { Na=0.2, Oa=-22.5249097921875} 
P { Na=-0.21702715474330336, Oa=-32.7277467} 
P { Na=0.19466306397879407, Oa=-37.51230686484375} 
P { Na=0.12889785332031245, Oa=-49.04594858671875} 

Nếu tôi đúng, nó có nghĩa là họ có cùng một tọa độ, đó là ngang bằng với mã.

[Edit2] Những tiến bộ mới!

Dường như các vectơ có vấn đề hiển thị khi xử lý một phép chiếu tùy chỉnh, chẳng hạn như được sử dụng để hiển thị bản đồ Minecraft đẳng động này. (Được tạo bằng Tectonicus)

Sau khi nhận xét cuối cùng, tôi sẽ thêm vào mã trực tiếp được liên kết phía trên hai Mảng gỡ lỗi mới, debugRegionLatLngs và debugRegionPoints. Mã trên được cập nhật để bạn có thể xem những gì chúng chứa.

[Edit3] chiếu và tọa độ nghiên cứu

Crossing BicycleDude với tôi, nó bây giờ gần như chắc chắn rằng đó là dự báo tùy chỉnh mà xác tàu đa giác. Trên thực tế, có a possibly related bug in Google Maps' API.

Phép chiếu này được sử dụng vì bản đồ Minecraft có thể hầu như vô hạn và phải sử dụng gmap, bao quanh sau kinh độ 360 °.Cũng có liên quan là thực tế là các tọa độ ingame được trả về theo một cách isometric, trong khi gmaps mong đợi một cái gì đó giống như phép chiếu Mercator.

Tôi đã thử tinh chỉnh phép chiếu một chút nhưng không có kết quả thú vị nào cho đến thời điểm này.

Answer 1

Hmm, tôi đã xem xét kỹ hơn và tôi thấy đa giác mảnh. Nếu bạn lưu ý vĩ độ của bạn, chúng cực kỳ gần 0 độ, có nghĩa là hầu như là một đường thẳng gần đường xích đạo. Tôi đã xác thực điều này bằng cách dán tọa độ của bạn vào một mẫu Google Maps hoàn toàn mới và chúng dường như không được định vị bằng dấu, vì vậy, bạn cần xem lại thông tin tọa độ đang được xử lý, xin lỗi, tôi biết tôi đã không tìm ra vấn đề của bạn.

Tôi đã sửa đổi mẫu tam giác Bermuda của Google Map để sử dụng kiểu mã hóa của bạn. tức là tôi đã sử dụng các biến của bạn và tuân theo tinh thần mã của bạn. Ví dụ này hiển thị 3 điểm đánh dấu và vẽ một đa giác cho tam giác Bermuda.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bermuda Hack Triangle</title> 
    <meta name="viewport" 
     content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <style type="text/css"> 
     #map_canvas { 
     width: 500px; 
     height: 500px; 
     } 
    </style> 
    <script type="text/javascript" scr="https://github.com/douglascrockford/JSON-js/blob/master/json2.js"></script> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     var map; 
     function initialize() { 
     var myoptions = { 
      zoom: 4, 
      center: new google.maps.LatLng(25, -70), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(
      document.getElementById('map_canvas'), 
      myoptions 
     ); 

     // Create pseudo coordinates 
     var regionMapMarkers = new google.maps.MVCArray(); 
     var p1 = new google.maps.LatLng(25, -80); 
     var p2 = new google.maps.LatLng(18, -66); 
     var p3 = new google.maps.LatLng(32, -64); 
     //p2.Qa += 360; 
     //p3.Qa -= 360; 
     regionMapMarkers.push(p1); 
     regionMapMarkers.push(p2); 
     regionMapMarkers.push(p3); 
     console.log(JSON.stringify(regionMapMarkers)); 

     // Draw Markers 
     regionMapMarkers.forEach(function(latLng, m){ 
      var marker = new google.maps.Marker(
      {   
      position: latLng, 
      map: map, 
      title: '', 
      optimized: false 
      }); 
     }); 

     // Draw Polygon 
     var region = new google.maps.Polygon({ 
      map: map, 
      paths: regionMapMarkers, 
      strokeColor: "#FF0000", 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: "#FF0000", 
      fillOpacity: 0.35 
     }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    </body> 
</html> 

Mẫu hoạt động. Nếu bạn chạy nó, bạn sẽ nhận được tam giác Bermuda được bao quanh bởi các điểm đánh dấu. Câu hỏi đặt ra là, trong thực tế, điều gì có thể ảnh hưởng đến thuật toán của bạn? Cho đến nay, chúng tôi đã suy đoán rằng phép chiếu Minecraft thực hiện điều gì đó. Tôi vẫn tin rằng đó là trường hợp.

Để xác thực lý thuyết đó, tôi đã cố gắng xác định mẫu tam giác Bermuda. Tôi cố gắng thêm và trừ 360 độ kinh độ hai điểm bằng cách uncommenting các dòng sau:

 p2.Qa += 360; 
     p3.Qa -= 360; 

Điều này không là nó vẫn sẽ cho phép nó để đặt các cột mốc trong cùng một vị trí nhưng đa giác lấp đi hoàn toàn spacko. Tôi tin rằng đây là những gì đang xảy ra trong kịch bản của bạn.

Điều tôi khuyên bạn nên làm là xem lại hệ tọa độ trong ứng dụng của bạn. Nếu bạn có thể chọn tọa độ mới, bạn có thể tránh các điều kiện cạnh như vậy xảy ra.

Answer 2

Tôi nhận thấy bạn đang vượt qua paths dưới dạng MVCArray chứa MVCArray khác. Bạn đã thử chỉ truyền một mảng đơn chiều như trong ví dụ của Google trong tài liệu?

Và bạn có cần gọi số setMap() hoặc chuyển qua thuộc tính map đủ để làm cho hiển thị không?

---

Dưới đây là của Google Polygon() ví dụ mã ... (from here)

function initialize() { 
    var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875); 
    var myOptions = { 
    zoom: 5, 
    center: myLatLng, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    var bermudaTriangle; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var triangleCoords = [ 
    new google.maps.LatLng(25.774252, -80.190262), 
    new google.maps.LatLng(18.466465, -66.118292), 
    new google.maps.LatLng(32.321384, -64.75737), 
    new google.maps.LatLng(25.774252, -80.190262) 
    ]; 

    // Construct the polygon 
    // Note that we don't specify an array or arrays, but instead just 
    // a simple array of LatLngs in the paths property 
    bermudaTriangle = new google.maps.Polygon({ 
    paths: triangleCoords, 
    strokeColor: "#FF0000", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#FF0000", 
    fillOpacity: 0.35 
    }); 

    bermudaTriangle.setMap(map); 
}