更改标记颜色“onclick” [英] Change marker color "onclick"

问题描述

我使用以下代码：

pre-class =lang-js prettyprint-override> //数组保存side_bar使用的标记和html的副本
//因为函数的关闭技巧在那里不起作用
var gmarkers = [];
var map = null;

函数initialize（）{
//创建地图
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'>标题< / 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'）;
}

}）;

函数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）;
}）;
//保存我们稍后需要用于side_bar的信息
gmarkers.push（marker）;
//向side_bar添加一行html
}


已经尝试过添加此代码

  marker.setIcon（'https://www.google.com/mapfiles/marker_green.png'）; 
  

在createmarker函数中有效，但不是我想要的。

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

我想要的是只更改所选标记的颜色，以便识别其他标记之间的点击标记。

任何提示？
Thanks，Dean。

解决方案

要点击更改标记，将以下行添加到点击监听器： p>

  this.setIcon（'https://www.google.com/mapfiles/marker_green.png'）; 
  

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

  for（var i = 0; i  gmarkers [i] .setIcon（'https://www.google.com /mapfiles/marker.png'）; // set back to default 
} 
  

概念证明小提琴

代码段：

  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）;}）; //保存稍后需要用于side_bar的信息gmarkers.push（marker）; //标记'click'，函数（marker，i）{for（var i = 0; i  

  html，body，＃map-canvas-big {height：500px;宽度：500px; margin：0px; < script src =https：//   

I would like to change the color of selected marker.

I'm using the following code:

// 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
}

already tried to add this code

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

within the "createmarker" function, it works but not how I would like to have.

Basically, it changes the marker color when I click on it but, when I select another marker, the "old" one remain with the "marker_green.png" icon.

What I would like to have is to change the color only for selected marker, in order to recognize the clicked marker among the others.

Any tip? Thanks, Dean.

解决方案

To change the marker on click add the following line to the click listener:

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

Then to change all the markers back to the default icon when you click on another, process through the array containing all the markers (gmarkers) setting the icons to the default (before setting the icon of the "active marker")

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

code snippet:

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)
});

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

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

这篇关于更改标记颜色“onclick”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！