Question

我在Google地图上（addListener函数中）有标记的setMarkers点击方法：

var infowindow = null;

$(document).ready(function () { initialize();  });

function initialize() {

    var centerMap = new google.maps.LatLng(39.828175, -98.5795);

    var myOptions = {
        zoom: 4,
        center: centerMap,
        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..."
        });

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

var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];



function setMarkers(map, markers) {
    var myContentDiv = document.getElementById('myDivID');//Reference to you DOM elem  

    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";
        //marker.xtraData = 'SomeExtraData';//You can even add more data this way

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            var myTemplate = '<h1>'+this.title+'<h1><p>'+this.html+'</p>';

            myContentDiv.innerHTML = myTemplate;//Inset this html inside link
            //infowindow.setContent(this.html);
            //infowindow.open(map, this);
        });
    }
}

我要做的是改变＆＃34;活跃＆＃34;标记到不同的图像。我确实看到了google.maps.MarkerImage课，但到目前为止，我所有的尝试都取代了＃34; a＆＃34;使用URL标记（不是我选择的标记），但是下一次点击（或关闭信息框）标记不会转换回正常状态。我觉得我非常接近，但此刻我还是陷入泥潭。任何帮助将不胜感激。谢谢！

Answer 1

以下是我的示例（从Mike Williams' v2 tutorial移植）：

http://www.geocodezip.com/v3_MW_example_hoverchange.html

一种方法（jsfiddle来自你上一个问题，更新）： http://jsfiddle.net/kV6Ys/44/

工作代码段：

var infowindow = null;
    var gmarkers = [];

    var defaultIcon = {url: 'http://google.com/mapfiles/ms/micons/red-dot.png',
      // This marker is 32 pixels wide by 32 pixels tall.
      size: new google.maps.Size(32, 32),
      // The origin for this image is 0,0.
      origin: new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      anchor: new google.maps.Point(16, 32)};

   var activeIcon = {url: 'http://google.com/mapfiles/ms/micons/yellow-dot.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      size: new google.maps.Size(32, 32),
      // The origin for this image is 0,0.
      origin: new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      anchor: new google.maps.Point(16, 32)};
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
      type: 'poly'
  };

    $(document).ready(function () { initialize();  });

    function initialize() {

        var centerMap = new google.maps.LatLng(39.828175, -98.5795);

        var myOptions = {
            zoom: 4,
            center: centerMap,
            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..."
            });

        var bikeLayer = new google.maps.BicyclingLayer();
        bikeLayer.setMap(map);
    }

    var sites = [
        ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
        ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
        ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
        ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
    ];



    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],
                icon: defaultIcon,
                zIndex: sites[3],
                html: sites[4]
            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                //alert(this.html);
                for (var i=0; i<gmarkers.length; i++) {
                   gmarkers[i].setIcon(defaultIcon);
                }
                this.setIcon(activeIcon);
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
            gmarkers.push(marker);
        }
    }

#map_canvas {
    width:600px;
    height:600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<h1>Map</h1>
<div id="map_canvas"></div>

Google Maps API v3 Active Marker onClick

1 个答案: