Question

我正在使用Google Maps API制作一个简单的页面3.我的第一个。 InfoWindow的一个标记效果很好。我添加了第二个标记，但我无法让每个标记显示自己的InfoWindow。我确信它很简单，但它不起作用。

function initialize() {
    var myLatlng = new google.maps.LatLng(37.8736111,-122.4555556);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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


    // Marker1  
    var marker1 = new google.maps.LatLng(37.8736111,-122.4555556);

    var contentString1 = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Blackie&#8217;s Pasture</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Historical Marker No. 1</b></p> '+
    '<p>The pasture where Blackie lived </p> '+
    '<a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank">' +
    '<img src="images/harvey.jpg" alt="Harvey" width="93" height="104"  /></a>' +
    '<img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104"  /></a><br />' +
    '<em>Click on a photo to enlarge it</em>' +
'</div>'+
    '</div>';   

    var infowindow = new google.maps.InfoWindow({
        content: contentString1
    });

var marker1 = new google.maps.Marker({
        position: marker1,
        map: map,
        title: "Blackie's Pasture"
    });

google.maps.event.addListener(marker1, 'click', function() {
        infowindow.open(map, marker1);
    });

    // Marker2
var marker2 = new google.maps.LatLng(37.8837959515249951,-122.46597290039062);

var contentString2 = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Marker Number 2</h1>'+
    '<div id="bodyContent">'+
    '<p><b>The second marker</b></p> '+
    '<p>Just another place </p> '+
    '<a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank">' +
    '<img src="images/harvey.jpg" alt="Harvey" width="93" height="104"  /></a>' +
    '<img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104"  /></a><br />' +
    '<em>Click on a photo to enlarge it</em>' +
    '</div>'+
    '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString2
    });

var marker2 = new google.maps.Marker({
        position: marker2,
        map: map,
        title: "Marker Number 2"
    });


    google.maps.event.addListener(marker2, 'click', function() {
        infowindow.open(map,marker2);
    });
}

Answer 1

你错过了一个分号*，你将marker1和marker2定义为LatLng s，然后用Marker覆盖它们......

...但是这里真正杀了你：你正在覆盖infowindow变量。尝试使用此代码（在code playground中简要测试）：

function initialize() {
    var myLatlng = new google.maps.LatLng(37.8736111, -122.4555556);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

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

    // Marker1  
    var latLng1 = new google.maps.LatLng(37.8736111, -122.4555556);

    var contentString1 = '<div id="content"><div id="siteNotice"></div><h2 id="firstHeading" class="firstHeading">Blackie&#8217;s Pasture</h1><div id="bodyContent"><p><b>Historical Marker No. 1</b></p> <p>The pasture where Blackie lived </p> <a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank"><img src="images/harvey.jpg" alt="Harvey" width="93" height="104" /></a><img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104" /></a><br /><em>Click on a photo to enlarge it</em></div></div>';

    var infowindow1 = new google.maps.InfoWindow({
        content: contentString1
    });

    var marker1 = new google.maps.Marker({
        position: latLng1,
        map: map,
        title: "Blackie's Pasture"
    });

    google.maps.event.addListener(marker1, 'click', function() {
        infowindow1.open(map, marker1);
    });

    // Marker2
    var latLng2 = new google.maps.LatLng(37.8837959515249951, -122.46597290039062);

    var contentString2 = '<div id="content"><div id="siteNotice"></div><h2 id="firstHeading" class="firstHeading">Marker Number 2</h1><div id="bodyContent"><p><b>The second marker</b></p> <p>Just another place </p> <a href="images/harvey.jpg" alt="Harvey" width="185" height="209" target="_blank"><img src="images/harvey.jpg" alt="Harvey" width="93" height="104" /></a><img src="images/marker-test.jpg" alt="Marker placque" width="93" height="104" /></a><br /><em>Click on a photo to enlarge it</em></div></div>';

    var infowindow2 = new google.maps.InfoWindow({
        content: contentString2
    });

    var marker2 = new google.maps.Marker({
        position: latLng2,
        map: map,
        title: "Marker Number 2"
    });

    google.maps.event.addListener(marker2, 'click', function() {
        infowindow2.open(map, marker2);
    });
}

使用jslint等静态代码分析工具很容易发现这种类型的错误。

*一个小问题，直到你缩小你的代码 - 然后这是一个更大的问题

带有多个标记和InfoWindows的Google Maps API

1 个答案: