javascript - Google map v3 - 标记不显示

Question

我正在尝试在 Google map (API v3) 上放置多个标记。我查看了 Google 文档以及这个 thread . map 绘制并以初始点为中心，但 map 上未显示任何标记。

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

标记未显示的原因是因为那部分代码在 触发加载事件和调用初始化方法之前执行 - 此时您的 map 变量已经创建但仍然为空。

尝试添加代码以在初始化方法中添加标记

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/