Cách sử dụng google maps API với nhiều điểm đánh dấu trên cùng một bản đồ

Question

Vì vậy, tôi có tập lệnh sau để sử dụng API bản đồ google, tất cả đều ổn, nhưng tôi cần tạo bản đồ có nhiều Marker (bóng) biểu tượng hình trỏ đến một cái gì đó) và tôi cần mỗi điểm đánh dấu để trỏ vào một khu vực khác của bản đồ (tức là các tọa độ khác nhau), làm cách nào tôi có thể làm điều đó?

<script type="text/javascript"> 

     function load() { 

     var map = new GMap2(document.getElementById("map")); 
     var marker = new GMarker(new GLatLng(<%=coordinates%>)); 

     var html="<img src='simplemap_logo.jpg' width='20' height='20'/> " + 
      "<%=maptitle%><br/>" + 
      "<%=text%>"; 



     map.setCenter(new GLatLng(<%=coordinates%>), <%=zoom%>) 
     map.setMapType(G_HYBRID_MAP); 
     map.addOverlay(marker); 
     map.addControl(new GLargeMapControl()); 
     map.addControl(new GScaleControl()); 
     map.addControl(new GMapTypeControl()); 


     marker.openInfoWindowHtml(html); 
     } 

     //]]> 
     </script> 

hơn Một câu hỏi, nếu tôi vượt qua các văn bản Script như là một biến, cho phép nói điều gì đó như:

<script type="text/javascript"> 
<%=ScriptText%> 
</script> 

và tôi <% = ScriptText%> sẽ là một chuỗi mà tôi sẽ xây dựng và gán giá trị của nó cho biến Friend hoặc Public được gọi là ScriptText, nó sẽ vẫn chạy và hoạt động đúng không? (tôi đang làm điều này để làm cho kịch bản của tôi năng động và khác nhau dựa trên cách tôi xây dựng nó như một STRING, do mù chữ của tôi trong javascripting; P)

Answer 1

obeattie và gregers đều đúng.Nói chung, bạn cần lưu trữ các thông số đánh dấu trong một số loại mảng mà bạn sau này sẽ sử dụng tại-ít nhất hai lần:

1. khi thêm lớp phủ vào bản đồ
2. khi thêm nó vào một đối tượng GLatLngBounds để tính toán điểm trung tâm và mức độ phóng

mảng hoặc đánh dấu sẽ trông giống như một mảng của các đối tượng, một cái gì đó như:

var latlng1 = [ 
    new GLatLng(48.1234, -120.1234), 
    new GLatLng(48.5678, -120.5678), 
    new GLatLng(48.9101, -120.9112), 
    new GLatLng(48.1121, -120.1314), 
    new GLatLng(48.3145, -120.1516), 
    new GLatLng(48.1617, -120.1718), 
    new GLatLng(48.1819, -120.1920), 
    new GLatLng(48.2021, -120.2122) 
]; 

mã này để thêm dấu wou ld trông giống như:

// assume that map1 is an instance of a GMap2 object 

    // #0 -- google maps api requires us to call setCenter first before calling any other operation on the map 
    map1.setCenter(new GLatLng(0, 0), 0); 

    // #1 -- add markers 
    for (var i = 0; i < latlng1.length; i++) 
    { 
    var marker = new GMarker(latlng1[ i ]); 
    map1.addOverlay(marker); 
    } 

    // #2a -- calculate center 
    var latlngbounds = new GLatLngBounds(); 
    for (var i = 0; i < latlng1.length; i++) 
    { 
    latlngbounds.extend(latlng1[ i ]); 
    } 

    // #2b -- set center using the calculated values 
    map1.setCenter(latlngbounds.getCenter(), map1.getBoundsZoomLevel(latlngbounds)); 

Đối với câu hỏi của bạn về việc sử dụng tập lệnh phía máy chủ bên trong javascript phía máy khách, bạn có thể kết hợp chúng lại với nhau. Đánh giá bởi mô tả của bạn, tôi nghĩ rằng đây là những gì bạn cần làm:

<script type="text/javascript"> 
    var latlng1 = new Array(); 
</script> 
<script type="text/javascript"> 
    <% 
     do until rs.eof 
      %> 
      latlng1.push(new GLatLng(parseFloat('<%= rs("Lat") %>'), parseFloat('<%= rs("Lng") %>'))); 
      <% 
      rs.movenext 
     loop 
    %> 
</script> 

Tôi đã đăng một bài viết tại địa chỉ: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

Bạn sẽ cần phải tạo mới GMarker cho mỗi địa điểm bạn muốn đánh dấu trên bản đồ. Có tài liệu khá tốt có sẵn here cho GMarker s.

Để tạo GMarker, bạn sẽ thấy từ tài liệu mà trước tiên bạn cần tạo một GLatLng đại diện cho vị trí bạn muốn thả điểm đánh dấu. Bạn đã không đề cập đến bất kỳ nội dung trong một quả bóng, vì vậy tôi giả sử nó chỉ là điểm đánh dấu bạn đang sau. Trong trường hợp của bạn, mã có lẽ sẽ giống như thế này:

var markerCoords = [ 
    new GLatLng(<latitude>, <longitude>), 
    new GLatLng(<latitude>, <longitude>), 
    [...] 
]; 

for (coord in markerCoords){ 
    map.addOverlay(new GMarker(coord)); 
}; 

tôi chắc chắn rằng bạn có lẽ có thể nói chính xác những gì đang xảy ra ở đây, nhưng chỉ trong trường hợp, tôi tạo ra một loạt các GLatLng đối tượng (điều này có thể của bất kỳ độ dài [trong giới hạn haha]), và sau đó lặp lại nó, thêm đánh dấu vào bản đồ cho mỗi GLatLng được xác định trong mảng.

Nếu bạn dự định tạo nhiều điểm đánh dấu, bạn có thể thấy hữu ích khi sử dụng Marker Manager, điều này sẽ tăng tốc đồng thời nhiều điểm đánh dấu (bằng cách không hiển thị đánh dấu trên màn hình và ngưng tụ trên màn hình) nếu có rất nhiều ở một khu vực của màn hình).

Answer 3

obeattie đã trả lời câu hỏi của bạn khá tốt. Nhưng từ mã ví dụ của bạn, có vẻ như bạn cũng muốn bản đồ phóng to khu vực chứa các điểm đánh dấu. Để thực hiện việc này với nhiều điểm đánh dấu, bạn có thể tạo một số GLatLngBounds mà bạn mở rộng cho mỗi điểm đánh dấu. Sau đó, bạn có thể lấy trung tâm và thu phóng sẽ phù hợp với bộ sưu tập các điểm đánh dấu của bạn từ đối tượng giới hạn.

var markersBounds = GLatLngBounds(); var coord = null; for (coord in markerCoords){ coord = new GMarker(coord); map.addOverlay(); markersBounds.extend(coord); };

var markersCenter = markersBounds.getCenter(); 
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds); 

map.setCenter(markersCenter, markersZoom); 

Tôi không chắc chắn 100% về G_HYBRID_MAP. getBoundsZoomLevel, nhưng nếu tôi nhớ chính xác, G_HYBRID_MAP là một phiên bản của GMapType.

Answer 4

Tôi không thể chỉnh sửa bài viết của tôi (xem ở trên), vì vậy tôi sẽ đăng một số sửa đổi. Nó không chính xác những gì bạn muốn, nó chỉ là một phác thảo thô:

var map; 
var markers = new Array(); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('47.59'), parseFloat('-120.65')), 
     name: 'Some html here' 
    } 
); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('48.84'), parseFloat('-122.59')), 
     name: 'Some html here as well' 
    } 
); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('47.83'), parseFloat('-120.01')), 
     name: 'And some more html...' 
    } 
); 
function create_gmarker(marker) 
{ 
    var gmarker = new GMarker(marker.latlng); 
    GEvent.addListener(gmarker, 'click', function() { 
      gmarker.openInfoWindowHtml(marker.name); 
     } 
    ); 
    return gmarker; 
} 
function initialize_gmap() 
{ 
    if (GBrowserIsCompatible()) 
    { 
     // initialize map etc here and other yada yada 
     for (var i in markers) 
     { 
      map.addOverlay(create_gmarker(markers[ i ])); 
     } 
    } 
} 

Ví dụ trên cũng thể hiện cách sử dụng ngây thơ của javascript [mảng] và {đối tượng}. Bạn nên sử dụng một số :)

Answer 5

Tôi có một cái gì đó như thế này nhưng sự kiện không hoạt động. Tôi có thể thêm người nghe bên trong một hàm tạo của đối tượng không?

//Localization object onstructor 
function Localization(width, height, description, img_source){ 
    this.point = new GLatLng(width, height); 
    this.marker = new GMarker(this.point); 
    this.description = description; 
    this.img_source = img_source; 
    GEvent.addListener(this.marker, "click", function(){marker.openInfoWindowHtml(this.description);}); 
} 

//map localizations to show on map 
var localizations = [ 
    new Localization(52.9015797, 15.2602200, 'Poznań1', 'eye1'), 
    new Localization(52.9025797, 15.1602200, 'Poznań2', 'eye2'), 
    new Localization(52.9035797, 15.2702200, 'Poznań3', 'eye3'), 
    new Localization(52.9045797, 15.2102200, 'Poznań4', 'eye4'), 
] 

var map = new GMap2(document.getElementById("mapa")); 
map.setCenter(localizations[3].point, 13); 
map.setUIToDefault(); 


for(i=0; i < localizations.length; i++){ 
    localization=localizations[i]; 
    map.addOverlay(localization.marker); 
    localization.marker.openInfoWindowHtml(localization.description); 
}