Question

我想更改所选标记的颜色。

我正在使用以下代码：

// arrays to hold copies of the markers and html used by the side_bar 
// because the function closure trick doesnt work there 
var gmarkers = [];
var map = null;

function initialize() {
    // create the map
    var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(51.519243, -0.126661),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas-big"),
        myOptions);
    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });
    var point = new google.maps.LatLng(51.5608308012934, -0.0540925428914196);
    var marker = createMarker(point, " Clapton ", "<div class='scrittafumetto' id='proprieta_4940'><strong><div class='titolo'> Title</div></strong><br /><a class='mostra_vedi'>Vedi</a></span></div>");
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

google.maps.event.addListener(marker, 'click', function(marker, i) {
    var marker_id = marker.id;


    if ($('#new-overview-main_' + marker_id).css('display') == 'block') {
        $('#new-overview-main_' + marker_id).css('display', 'none');
    } else {
        $('#new-overview-main_' + marker_id).css('display', 'block');
    }

});

function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
}

已尝试添加此代码

marker.setIcon('https://www.google.com/mapfiles/marker_green.png');

在“createmarker”功能中，它可以工作，但不是我想要的。

基本上，当我点击它时它会改变标记颜色，但是当我选择另一个标记时，“old”保留了“marker_green.png”图标。

我想要的是仅更改所选标记的颜色，以识别其他标记中的点击标记。

任何提示？谢谢，Dean。

Answer 1

尝试将当前标记保留在变量中，并在新事件触发时更改它。类似的东西：

google.maps.event.addListener(marker, 'click', function() {
 if (currentMarker != null) {
    currentMarker.setIcon('https://www.google.com/mapfiles/marker_red.png');
        currentMarker = null;
   };
 currentMarker = marker;
 marker.setIcon('https://www.google.com/mapfiles/marker_green.png');
}

Answer 2

要在点击时更改标记，请将以下行添加到点击侦听器：

 this.setIcon('https://www.google.com/mapfiles/marker_green.png');

然后在单击另一个时将所有标记更改回默认图标，处理包含所有标记（gmarkers）的数组，将图标设置为默认值（在设置＆＃的图标之前） 34;活跃标记＆＃34;）

for (var i = 0; i < gmarkers.length; i++) {
  gmarkers[i].setIcon('https://www.google.com/mapfiles/marker.png'); // set back to default
}

proof of concept fiddle

代码段

＆＃13;

function createMarker(latlng, name, html) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: 'https://www.google.com/mapfiles/marker.png',
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  // save the info we need to use later for the side_bar
  gmarkers.push(marker);
  // add a line to the side_bar html
  google.maps.event.addListener(marker, 'click', function(marker, i) {
    for (var i = 0; i < gmarkers.length; i++) {
      gmarkers[i].setIcon('https://www.google.com/mapfiles/marker.png'); // set back to default
    }
    this.setIcon('https://www.google.com/mapfiles/marker_green.png');
    var marker_id = marker.id;


    if ($('#new-overview-main_' + marker_id).css('display') == 'block') {
      $('#new-overview-main_' + marker_id).css('display', 'none');
    } else {
      $('#new-overview-main_' + marker_id).css('display', 'block');
    }

  });

}

// arrays to hold copies of the markers and html used by the side_bar 
// because the function closure trick doesnt work there 
var gmarkers = [];
var map = null;

function initialize() {
  // create the map
  var myOptions = {
    zoom: 15,
    center: new google.maps.LatLng(51.56, -0.054),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas-big"),
    myOptions);
  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  var point = new google.maps.LatLng(51.5608308012934, -0.0540925428914196);
  var marker = createMarker(point, " Clapton ", "<div class='scrittafumetto' id='proprieta_4940'><strong><div class='titolo'> Title</div></strong><br /><a class='mostra_vedi'>Vedi</a></span></div>");
  var point2 = new google.maps.LatLng(51.56, -0.05);

  var marker2 = createMarker(point2, " somewhere ", "<div class='scrittafumetto' id='proprieta_4941'><strong><div class='titolo'> Title</div></strong><br /><a class='mostra_mardi'>Mardi</a></span></div>");

}
google.maps.event.addDomListener(window, 'load', initialize);
var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

＆＃13;

html,
body,
#map-canvas-big {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas-big" style="border: 2px solid #3872ac;"></div>

＆＃13;

更改标记颜色“onclick”

2 个答案: