如何使用我的功能在我的地图中显示多个图像(谷歌地图)

时间:2017-10-09 21:59:09

标签: javascript google-maps

这是我在这里的第一个问题所以请跟我一起冷静。我正在尝试使用此代码为我的标记添加多于一个图像。一切都很好但是当我显示信息时,所有标记都是相同的图像,而不是他们在BD上的图像。我想这是因为我的loc.marker但我真的不明白。如果有人能帮我一把,我将不胜感激

这是我的功能:

function setMarkers(locObj) {
    <?php for ($i=0; $i<count($plak); $i++) { ?>
    $.each(locObj, function(key, loc) {
        if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
            loc.marker = new google.maps.Marker({
                position: new google.maps.LatLng(loc.lat, loc.lng),
                map: map,
                icon: 'profile/img/<?php echo $carr[$i] ?>.png'
            });
            google.maps.event.addListener(loc.marker, 'click', (function(key) {
                return function() {
                    infowindow.setContent(locations[key].info);
                    infowindow.open(map, locations[key].marker);
                }
            })(key));
            locations[key] = loc;
        } else if (locations[key] && loc.remove) {
            if (locations[key].marker) {
                locations[key].marker.setMap(null);
            }
            delete locations[key];
        } else if (locations[key]) {
            $.extend(locations[key], loc);
            if (loc.lat !== undefined && loc.lng !== undefined) {
                locations[key].marker.setPosition(new google.maps.LatLng(loc.lat, loc.lng));
            }
        }
    });
    <?php } ?>
}

我添加了for,因为$plak给我带来了一些将要显示的寄存器,$carr[]是一个数组,它为我提供了所有图像名称以便放置它们在标记和地图中。

更新 我做到了,只是将图像添加到ajax文件中,所以我只需拨打icon:icon.images,删除for,它就会显示我想要的内容。谢谢你的一切

1 个答案:

答案 0 :(得分:0)

你的问题是生成n次在PHP中生成相同的代码,你有没有看过你的页面源代码?当你看着它然后理解我在说什么,因此你在标记上看到相同的图像,我尝试在下面显示你的功能代码

$plak has these values 1-A, 2-B, 3-C
function setMarkers(locObj) {
$.each(locObj, function(key, loc) {
    if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
        loc.marker = new google.maps.Marker({
            position: new google.maps.LatLng(loc.lat, loc.lng),
            map: map,
            icon: 'profile/img/A.png'
        });
......
    $.each(locObj, function(key, loc) {
    if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
        loc.marker = new google.maps.Marker({
            position: new google.maps.LatLng(loc.lat, loc.lng),
            map: map,
            icon: 'profile/img/B.png'
        });
......
    $.each(locObj, function(key, loc) {
    if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
        loc.marker = new google.maps.Marker({
            position: new google.maps.LatLng(loc.lat, loc.lng),
            map: map,
            icon: 'profile/img/C.png'
        });
......
}

然后C标记图像覆盖相同位置的其他标记图像。 享受