Google Maps v3 - Điểm đánh dấu không hiển thị

Question

Tôi đang cố gắng đặt nhiều điểm đánh dấu trên Bản đồ Google (API v3). Tôi đã xem các tài liệu của Google và cũng có thể là thread này. Bản đồ vẽ và căn giữa đến điểm bắt đầu nhưng không có điểm đánh dấu nào được hiển thị trên bản đồ.

Firebug không báo cáo bất kỳ lỗi nào.

Đây là JS

<script type="text/javascript"> 

    var map; 

    function initialize() { 
      var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(41.056466,-85.3312009), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

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

    //Add 1st marker 
    var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); 
    var marker_0 = new google.maps.Marker({ 
     position: Latlng_0, 
        title:"0"}); 

     marker_0.setMap(map); 

    //Add 2nd marker 
    var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708); 
    var marker_1 = new google.maps.Marker({ 
     position: Latlng_1, 
     title:"1"}); 
     marker_1.setMap(map); 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Cám ơn tìm kiếm!

Answer 1

Lý do các dấu hiệu không hiển thị lên là bởi vì đó là một phần của mã là nhận được thực hiện trước sự kiện tải bị sa thải và phương pháp khởi tạo được gọi - tại thời điểm đó biến bản đồ của bạn đã được tạo ra nhưng vẫn còn rỗng .

thử thêm mã để thêm dấu bên trong phương thức khởi

var map; 

function initialize() { 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(41.056466,-85.3312009), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    // Add 1st marker 
    var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709); 
    var marker_0 = new google.maps.Marker(
     { 
      position: Latlng_0, 
      title:"0" 
     } 
    ); 

    marker_0.setMap(map); 

    //Add 2nd marker 
    var Latlng_1 = new google.maps.LatLng(41.065294480291,-85.330151019708); 
    var marker_1 = new google.maps.Marker(
     { 
      position: Latlng_1, 
      title:"1" 
     } 
    ); 

    marker_1.setMap(map); 
} 

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

thấy jsfiddle này đây nơi đánh dấu được hiển thị http://jsfiddle.net/KvugB/

Answer 2

tôi sử dụng mã này. Tôi hy vọng nó sẽ giúp bạn:

(function() { 

window.onload = function() { 

    // Creating a new map 
    var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(41.056466, -85.3312009), 
     disableDefaultUI: false, 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }); 


    // Creating the JSON data 
    var json = [ 
     { 
      "title": "Title 1", 
      "lat": 41.057814980291, 
      "lng": -85.329851919709, 
      "description": "" 
     }, 
     { 
      "title": "Title 2", 
      "lat": 41.057814981000, 
      "lng": -85.8048, 
      "description": "" 
     }, 
    ] 

    var styles = [ 
    { 
    "featureType": "water", 
    "elementType": "geometry.fill", 
    "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#0077bb" }, 
    { "lightness": 70 } 
     ] 
     },{ 
     "featureType": "landscape.natural", 
     "elementType": "geometry.fill", 
     "stylers": [ 
     { "visibility": "on" }, 
     { "saturation": -100 }, 
     { "color": "#699e6b" }, 
     { "lightness": 76 } 
     ] 
     },{ 
     "featureType": "poi.park", 
     "elementType": "geometry.fill", 
     "stylers": [ 
     { "visibility": "off" } 
     ] 
     },{ 
     "featureType": "road.local", 
     "elementType": "geometry.fill", 
     "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#ffffff" } 
     ] 
     } 
     ]; 

     map.setOptions({styles: styles}); 



    // Creating a global infoWindow object that will be reused by all markers 
    var infoWindow = new google.maps.InfoWindow(); 

    // Looping through the JSON data 
    for (var i = 0, length = json.length; i < length; i++) { 
     var data = json[i], 
      latLng = new google.maps.LatLng(data.lat, data.lng); 




     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      title: data.title 
     }); 

     // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
     (function(marker, data) { 

      // Attaching a click event to the current marker 
      google.maps.event.addListener(marker, "click", function(e) { 
       infoWindow.setContent(data.description); 
       infoWindow.open(map, marker); 
      }); 


     })(marker, data); 

    } 

} 

    })(); 

Answer 3

Đây là một câu trả lời cho câu trả lời @ JoanManuelHernández, nhưng tôi không thể đăng được định dạng mã trong một nhận xét.

Joan, giải pháp của bạn tuyệt vời; nó rất giống với cách tôi tự làm. Tạo một mảng các vị trí đánh dấu là cách tốt hơn so với sử dụng các biến riêng lẻ cho từng vị trí.

Tôi muốn đề xuất một vài cải tiến nhỏ. Một là nơi bạn có mảng có tên là json. Đó không phải là một tên rất mô tả; json có thể có nghĩa là bất kỳ loại dữ liệu nào. Làm thế nào về gọi nó là một cái gì đó như places hoặc locations hoặc tương tự?

Tiếp theo, nơi bạn có vòng lặp tạo kết nối để xử lý gọi lại không đồng bộ, tôi nghĩ sẽ dễ dàng hơn để hiểu cách hoạt động nếu bạn di chuyển toàn bộ vòng lặp vào chức năng riêng của nó. Sau đó, bạn không cần hàm ẩn danh nội tuyến. Vì vậy, mã này:

// Looping through the JSON data 
for (var i = 0, length = json.length; i < length; i++) { 
    var data = json[i], 
     latLng = new google.maps.LatLng(data.lat, data.lng); 

    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     title: data.title 
    }); 

    // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
    (function(marker, data) { 

     // Attaching a click event to the current marker 
     google.maps.event.addListener(marker, "click", function(e) { 
      infoWindow.setContent(data.description); 
      infoWindow.open(map, marker); 
     }); 


    })(marker, data); 
} 

sẽ trở thành:

// Looping through the places list 
for(var i = 0, length = places.length; i < length; i++) { 
    addPlace(places[i]); 
} 

// Add one place marker 
function addPlace(place) { 
    var latLng = new google.maps.LatLng(place.lat, place.lng); 

    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
     position: latLng, 
     map: map, 
     title: place.title 
    }); 

    // Attaching a click event to the current marker 
    google.maps.event.addListener(marker, "click", function(e) { 
     infoWindow.setContent(place.description); 
     infoWindow.open(map, marker); 
    }); 
} 

Nó làm điều tương tự, chỉ là một chút đơn giản theo cách này.

Một suy nghĩ khác: Các công cụ bản đồ theo kiểu là rất mát mẻ — Tôi là một fan hâm mộ lớn của bản đồ theo kiểu bản thân mình — nhưng tôi tự hỏi, nếu nó phải được bỏ qua ở đây vì lợi ích của sự đơn giản, vì nó không liên quan đến câu hỏi của OP?

Hãy thoải mái kết hợp bất kỳ ý tưởng nào vào câu trả lời của riêng bạn nếu bạn thích chúng và nếu có ai khác tìm thấy biến thể này hữu ích, vui lòng trả lời câu trả lời của Joan vì đó là mã gốc.