Question

我即将创建一个谷歌地图脚本，我可以设置位置（不是lat和lng），但谷歌地图中的位置，所以它显示该位置的图片，鼠标悬停时应打开一个图片叠加+ text。

我有脚本显示1个地址，但是如何实现1个以上？像阵列[“伦敦”，“欧登塞C，丹麦”，“某事”]？

指针应该是图像（costum图像），而不是默认谷歌地图的点。我试过这个，但它没有显示任何东西。请帮帮我！

$(function () {
var geocoder = new google.maps.Geocoder();

function getPosition(address) {
    geocoder.geocode({
        "address": address
    }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            //Create the popup etc..
            var contentString = '<div id="
            content "><div id="
            siteNotice "></div><h2 id="
            firstHeading " class="
            firstHeading ">dsfdf</h2><div id="
            bodyContent "><p>Some text in here</p></div></div>';

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

            google.maps.event.addListener(marker, "mouseover", function () {
                infoWindow.open(map, marker);
            });


            return results[0].geometry.location;
        }
    });
}




if ($("div#map").length) {
    // google map

    var name = "Stolen property";
    var address = "Odense, Denmark";


    geocoder.geocode({
        "address": "Odense Danmark"
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 15,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false,
                disableDefaultUI: true
            });

            //Create 1
            var marker = new google.maps.Marker({
                position: getPosition("Brogade Odense Danmark"),
                map: map,
                title: name
            });

            //Create two!
            var marker = new google.maps.Marker({
                position: getPosition("Skibhusvej Odense Danmark"),
                map: map,
                title: name
            });

        }


        //Add it!


    });
}
});

Answer 1

您需要构建一个循环来遍历并对阵列中的每个地址进行地理编码。请参阅此处问题中提到的代码段：Google Map V3 : Only some markers are displayed

您还可以使用标记的“图标”属性为标记设置自定义图像：

var image = 'images/iconParcelB25.png';

var marker = new google.maps.Marker({
    position:latLng,
    map:map,
    title:projName,
    icon:image
});

此代码段指的是网站资产中的本地PNG，但它也适用于远程可用的图像（即http://www.example.com/images/theImage.jpg）。

编辑：我不确定你的意思是“添加带图像和文字的叠加层”。你的意思是infowindow？对于这种事情，这是一个更典型的用例。

编辑：这就是我要做的事情：

将描述性位置/地址放入变量中，可能是循环：

var location = addresses[i];

创建一个新的infowindow，引用infoWindow中需要的位置和其他任何文本。如果要包含自定义图像/文本，请将其放在内容字符串的标记中：

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">+ location +</h2>'+
    '<div id="bodyContent">'+
    '<p>Some text in here</p>'+
    '</div>'+
    '</div>';

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

创建一个新标记，设置mouseOver事件以打开infoWindow和mouseOut事件以关闭它。另外，请记住，您需要将图标设置为自定义图像。这里我使用的是latlng，但在您的情况下，您可以将位置设置为地理编码服务的位置几何输出，就像在代码片段中一样。

var image = 'images/iconParcelB25.png';

        var marker = new google.maps.Marker({
            position:latLng,
            map:map,
            title:projName,
            icon:image
        });

//sets up the mouseover listener
google.maps.event.addListener(marker, 'mouseover', function() {
    infoWindow.open(map,marker);
});

//sets up the mouseout listener
google.maps.event.addListener(marker, 'mouseout', function() {
    infoWindow.close(map,marker);
});

谷歌地图中的多个地址？和叠加

1 个答案: