3

My HTML:

<div id="map_canvas" style="width: 625px; height: 500px;"></div>

My JQuery:

var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {

        var centerMap = new google.maps.LatLng(40.68194, -73.94439);

        var myOptions = {
            zoom: 13,
            center: centerMap,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
                content: "loading...", maxWidth: 150
            });

        //var bikeLayer = new google.maps.BicyclingLayer();
        //bikeLayer.setMap(map);
    }   

    function setMarkers(map, markers) {

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4]
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }

How can I achieve,

  1. To show site[0] infobubble on page load by default.

  2. To have different marker for each on the map.

4

2 回答 2

2

默认情况下在页面加载时显示站点 [0] 信息气泡。

infowindow.open(map, site[0]);

在地图上为每个标记设置不同的标记。 假设您指的是不同的标记图像，您可以在创建标记时设置它们，或者site[i].setIcon('newImage.png')稍后简单地调用

参考：Google Maps API v3：如何动态更改标记图标？

于 2013-05-30T19:40:39.613 回答
1

  1. 要使用自定义图标，对于一个简单的图标，只需将图标 URL 添加到您的站点数组，在您的标记定义中使用它。

            icon: sites[5]

  2. 保留对标记的引用：

    // in the global scope
var gmarkers = [];



for (var i = 0; i < markers.length; i++) {
    var sites = markers[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: sites[0],
        zIndex: sites[3],
        html: sites[4],
        icon: sites[5]
    });
    gmarkers.push(marker);
    var contentString = "Some content";

    google.maps.event.addListener(marker, "click", function () {
        //alert(this.html);
        infowindow.setContent(this.html);
        infowindow.open(map, this);
    });

  3. 然后单击第一个标记（这将打开信息窗口）：

    google.maps.event.trigger(gmarkers[0], "点击");

工作示例

于 2013-05-30T20:04:35.873 回答