如何在#34; Marker1"," Marker2"

时间:2014-05-15 08:39:09

标签: javascript google-maps google-maps-markers

对不起那个新手的问​​题,但我没有发现任何关于这个问题的想法......

我想在谷歌地图上创建4个标记(或更多,但这里是4)。我通过GET ajax请求获取信息,并使用JSON进行响应。我可以创建这些标记,但是每个标记的信息窗口都有问题。

这里是我尝试的代码:

    function readDevices(output){
// Get an array for the 4 devices with guid 42421 42422 42423 and 42424
        var arrayOfDevices = new Array();
        $.each(output.data, function(key, value){
            $.each(value, function(deviceKey, deviceValue){
                if(deviceKey == 'guid' && deviceValue >= 42421 && deviceValue <= 42424){
                    arrayOfDevices.push(value); // add the entire object in the tab
                }
            });
        });

        for(var i = 0; i < arrayOfDevices.length; i++){
            var guid = arrayOfDevices[i]["guid"];
            var latitude = arrayOfDevices[i]["latitude"];
            var longitude = arrayOfDevices[i]["longitude"];
            var name = arrayOfDevices[i]["name"];
            var coord = new google.maps.LatLng(latitude, longitude);

            var contentString = '<div id="content">'+
                '<form method="get" action="manual" id="form-new">'+
                    '<button type="submit" id="new-button" name="'+guid+'" class="btn new-btn">Manual</button>'+
                '</form>'+
                '</div>';

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

            var marker = new google.maps.Marker({
                position: coord,
                title: name
            });
            marker.setMap(map);
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });
        }
    }

此代码在正确的位置放置了4个标记。但是当我点击其中一个标记时,“弹出窗口”出现在我创建的最后一个标记附近。我想为每个标记设置信息窗口。

我做不了类似的事情:

var marker+i = new google.maps.Marker();

...但也许有一些提示可以做一些这样的事情吗?

我希望很明显^^'

感谢您的帮助,伙计们! : - )

KhorneHoly回答后的正确代码!谢谢他。

function addMarker(markerData, map){
    var contentString = '<div id="content">'+
        '<form method="get" action="manual" id="form-new">'+
            '<button type="submit" id="new-button" name="'+markerData["guid"]+'" class="btn new-btn">Manual</button>'+
        '</form>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    var LatLng = new google.maps.LatLng(markerData["latitude"], markerData["longitude"]);
    var marker = new google.maps.Marker({
        position: LatLng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });
}

function readDevices(output){
    var arrayOfDevices = new Array();
    var markers = new Array();
    $.each(output.data, function(key, value){
        $.each(value, function(deviceKey, deviceValue){
            if(deviceKey == 'guid' && deviceValue >= 42421 && deviceValue <= 42424){
                arrayOfDevices.push(value);
            }
        });
    });

    for(var i = 0; i < arrayOfDevices.length; i++){
        var guid = arrayOfDevices[i]["guid"];
        var latitude = arrayOfDevices[i]["latitude"];
        var longitude = arrayOfDevices[i]["longitude"];
        var name = arrayOfDevices[i]["name"];
        var coord = new google.maps.LatLng(latitude, longitude);
        markers.push(addMarker(arrayOfDevices[i], map));
    }
}

1 个答案:

答案 0 :(得分:1)

您不想做什么,因为您无法生成这样的变量。但你可以做的是生成一个数组,你在for循环中填充标记,如下所示:

var markers = new Array();    
for (var i = 0; i < ArrayWithYourResultYouWantGenerateTheMarkersFrom.length; ++i) {
    markers.push(addMarker(ArrayWithYourResultYouWantGenerateTheMarkersFrom.[i], map));
}

public function addMarker(markerData, map){
    var LatLng = new google.maps.LatLng(markerData.lat, markerData.lon);
    var marker = new google.maps.Marker({
        position: LatLng,
        map: map,
}