谷歌地图v3 - 不显示标记

Question

我想在Google地图（API v3）上放置多个标记。我看了一下Google文档，也是这个thread。地图绘制并居中到初始点，但地图上没有显示标记。

Firebug不报告任何错误。

这里是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> 

为寻找谢谢！

Answer 1

标记没有显示的原因是因为那部分代码在之前得到执行load事件被触发并且初始化方法被调用 - 此时您的map变量已经创建但仍然为空。

尝试添加代码添加标记initialize方法

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); 

在这里看到这里面的jsfiddle其中所述标志物都出现了http://jsfiddle.net/KvugB/

Answer 2

我用这个代码。我希望它可以帮助你：

(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

这是@JoanManuelHernández的回答答复，但在评论我不能发布格式的代码。

琼，你的解决方案是优秀的;这与我自己如何做这件事非常相似。创建标记位置数组比每个变量使用单个变量要好得多。

我想提出一些小改进。一个是你的阵列名为json。这不是一个非常具有描述性的名字; json可能意味着任何类型的数据。把它称为places或locations之类的东西怎么样？

接下来，如果您有创建闭包来处理异步回调的循环，我认为如果将整个循环体移动到它自己的函数中，它的工作原理会更容易一些。那么你不需要内联匿名函数。所以这个代码：

// 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); 
} 

将成为：

// 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); 
    }); 
} 

它做同样的事情，只是一点点简单的这种方式。

另外一个想法：风格化地图的东西是非常酷—我风格的地图的忠实粉丝自己—，但我不知道是否应该离开这里，出去简单起见，因为它是不相关的OP的问题？

如果你喜欢它们，随意将这些想法纳入你自己的答案，如果其他人发现这种变化有用，请注意Joan的答案，因为这是原始代码的来源。