谷歌地图api信息框插件和多个标记

时间:2011-09-05 13:35:35

标签: google-maps google-maps-api-3 maps

使用信息框插件http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-basic.html

时,如何创建具有不同内容的多个标记

我正在创建var marker1,var marker2等,但我认为这不是一个非常好的方法,而且我在所有的infowindows都有相同的内容...

3 个答案:

答案 0 :(得分:16)

您只需要使用某种工厂生成标记,例如:

function initMarkers(map, markerData) {
    var newMarkers = []

    // Here's where all the really verbose code goes. Loop through `markerData` to
    // create each marker.  See the full code in the js fiddle

    return newMarkers;
}

function initialize_google_map() {
    //Here the call to initMarkers() is made with the necessary data for each marker.
    //All markers are then returned as an array into the markers variable, Usually you'd 
    //get the data from server or something, here it's just shown inline.

    var markers = initMarkers(map, [
        { latLng: new google.maps.LatLng(49.47216, -123.76307), address: "Address 1", state: "State 1" },
        { latLng: new google.maps.LatLng(49.47420, -123.75703), address: "Address 2", state: "State 2" },
        { latLng: new google.maps.LatLng(49.47530, -123.78040), address: "Address 3", state: "State 3" }
    ]);
}

使用HTML和in this jsfiddle查看完整的示例。

答案 1 :(得分:3)

for infobox toggle onclick replace:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        newMarkers[i].infobox.open(theMap, this);
        theMap.panTo(markerData[i].latLng);
    }
})(marker, i));

通过:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        for ( h = 0; h < newMarkers.length; h++ ) {
            newMarkers[h].infobox.close();
        }
        newMarkers[i].infobox.open(theMap, this);
        theMap.panTo(markerData[i].latLng);
    }
})(marker, i));

答案 2 :(得分:0)

@DonamiteIsTnt您的示例非常有用但是markerData [i]没有任何属性latLng我认为使用markerData [i] .position。它对我有用。