-1

我即将创建一个谷歌地图脚本，我可以在其中设置位置（不是纬度和经度），而是在谷歌地图中设置位置，因此它会在该位置显示一张图片，当鼠标悬停时它应该打开一个带有图片+文字的叠加层。

我有显示 1 个地址的脚本，但是如何实现超过 1 个？像一个数组 ["London", "Odense C, Danmark", "something"] ？

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

$(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!


    });
}
});
4

1 回答 1

1

您将需要构建一个循环来遍历数组中的每个地址并对其进行地理编码。请参阅此处问题中提出的代码片段：Google Map V3：仅显示一些标记

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

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）。

编辑：我不确定“添加带有图像和文本的叠加层”是什么意思。你是说信息窗口吗？这是这类事情的一个更典型的用例。

编辑：这就是我要做的：

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

var location = addresses[i];

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

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);
});
于 2013-02-23T13:54:59.563 回答