Google Maps API：更新标记颜色 [英] Google Maps API: update Marker color

查看：113
本文介绍了Google Maps API：更新标记颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

根据条件是 TRUE 还是不是，我有几个 Google地图标记颜色。

此外，这些标记在鼠标移过分区时会改变颜色（a1，a2..ax）。

我会像这些标记一样，当鼠标离开分区时，返回之前设置的颜色。

它会在 marker.setIcon 之前提供如下内容：'保存标记状态颜色'，然后在 mouseleave ？



感谢您的帮助。

这里是我的代码，在 mouseleave 之后为蓝色。 

 函数load（）{
 var map = new google .maps.Map（document.getElementById（map），{
 center：new google.maps.LatLng（<？= json_encode（$ lat）;？> ;,<？= json_encode（$ lng ）; 
 zoom：<？php echo json_encode（$ zoom）;？> ;, 
 mapTypeId：'roadmap'
}）; 
 var infoWindow = new google.maps.InfoWindow; 
 $ b downloadUrl（<？= json_encode（$ url）;？>，function（data）{
 var xml = data.responseXML; 
 var markers = xml.documentElement .getElementsByTagName（marker）; 
 for（var i = 0; i< markers.length; i ++）{
 var name = markers [i] .getAttribute（name）; 
 var address = markers [i] .getAttribute（address）; 
 var cf = markers [i] .getAttribute（cf）; 
 var wh = markers [i] .getAttribute wh）; 
 var point = new google.maps.LatLng（
 parseFloat（markers [i] .getAttribute（lat）），
 parseFloat（markers [i] .getAttribute （lng）））; 
 var html =< b>+ name +< / b>< br />+ address; 
 var image1 ='http： //labs.google.com/ridefinder/images/mm_20_blue.png'; 
 var image2 ='http://labs.google.com/ridefinder/images/mm_20_red.png'; 
 
 
 
 var marker = new google.maps.Marker（{
 map：map，
 position：point 
 
}）; 
 
 if（cf ==true）
 {
 marker.setIcon（'http://labs.google.com/ridefinder/images/mm_20_blue.png'） ; 
} 
 
 
 else if（wh ==true）
 {
 marker.setIcon（'http://labs.google.com /ridefinder/images/mm_20_green.png'）; 
} 
 
 else 
 {
 marker.setIcon（'http://labs.google.com/ridefinder/images/mm_20_red.png'）; 
} 
 
 hover（marker，i）; 
 bindInfoWindow（marker，map，infoWindow，html）; 
} 
}）; 
 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
 
}）; 
} 
 
函数hover（marker，i）{
 document.getElementById（'a'+ i）.onmouseover = function（）{
 marker.setIcon 'http://labs.google.com/ridefinder/images/mm_20_orange.png'）; 
} 
 document.getElementById（'a'+ i）.onmouseleave = function（）{
 marker.setIcon（'http://labs.google.com/ridefinder/images/mm_20_blue .PNG'）; 
} 
} 
 
函数downloadUrl（url，callback）{
 var request = window.ActiveXObject？ 
 new ActiveXObject（'Microsoft.XMLHTTP'）：
 new XMLHttpRequest; 
 
 request.onreadystatechange = function（）{
 if（request.readyState == 4）{
 request.onreadystatechange = doNothing; 
回调（request，request.status）; 
} 
}; 
 
 
 request.open（'GET'，url，true）; 
 request.send（null）;


解决方案

我的建议是使用在createMarker函数中使用函数闭包来关联事件监听器和标记的属性。 

 函数createMarker（point，cf， wh，html，i，map）{
 var marker = new google.maps.Marker（{
 map：map，
 position：point，
 draggable：true 
 
}）; 
 var activeIcon，idleIcon; 
 if（cf ==true）{
 idleIcon ='http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
} else if（wh ==true）{
 idleIcon ='http://labs.google.com/ridefinder/images/mm_20_green.png'; 
}其他{
 idleIcon ='http://labs.google.com/ridefinder/images/mm_20_red.png'; 
} 
 marker.setIcon（idleIcon）; 
 
 var elem = document.getElementById（'a'+ i）; 
 if（!! elem）{
 elem.onmouseover = function（）{
 marker.setIcon（'http://labs.google.com/ridefinder/images/mm_20_orange.png' ）; 
} 
 elem.onmouseleave = function（）{
 marker.setIcon（idleIcon）; 
 
 $ b google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open （map，marker）; 
 
}）; 
 
返回标记;

像这样调用它：

  downloadUrl（<？= json_encode（$ url）;？>，function（data）{
 var xml = data.responseXML; 
 var markers = xml.documentElement.getElementsByTagName（marker）; 
 for（var i = 0; i< markers.length; i ++）{
 var name = markers [i] .getAttribute（name ）; 
 var address = markers [i] .getAttribute（address）; 
 var cf = markers [i] .getAttribute（cf）; 
 var wh = markers [ i] .getAttribute（wh）; 
 var point = new google.maps.LatLng（
 parseFloat（markers [i] .getAttribute（lat）），
 parseFloat（markers [i] .getAttribute（lng）））; 
 var html =< b>+ name +< / b>< br />+ address; 
 createMarker （point，cf，wh，html，i，map）; 
}

概念证明小提琴


I have several Google Maps Markers colors depending on whether conditions are TRUE or not.

Additionally these Markers change color when mouse is over a division (a1,a2..ax).

I'd like these Markers to go back to the color set previously when mouse leaves the division.

Would it give something like : 'save Marker state color' before marker.setIcon and then caling back this color on mouseleave?

Thanks for your help.

Here is my code, working fine except that every marker is blue after mouseleave.

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(<?= json_encode($lat); ?>, <?= json_encode($lng);?>),
    zoom: <?php echo json_encode($zoom); ?>,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  downloadUrl(<?= json_encode($url); ?>, function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var cf = markers[i].getAttribute("cf");
      var wh = markers[i].getAttribute("wh");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + address;
      var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
      var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png';



      var marker = new google.maps.Marker({
        map: map,
        position: point    

      });

      if (cf == "true") 
      {
          marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
      }


      else if (wh == "true") 
      {
          marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_green.png');
      }

     else
     {
         marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');
     }

       hover(marker,i);
      bindInfoWindow(marker, map, infoWindow, html);      
    }
    });
  }

    function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });
}

function hover(marker, i){
document.getElementById('a'+i).onmouseover = function() {
   marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_orange.png');
}
document.getElementById('a'+i).onmouseleave = function() {
   marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png');
}
    }

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };


  request.open('GET', url, true);
  request.send(null);
}

解决方案

My suggestion would be to use function closure in a createMarker function to associate the event listeners and properties of the marker with it.

function createMarker(point, cf, wh, html, i, map) {
  var marker = new google.maps.Marker({
    map: map,
    position: point,
    draggable: true

  });
  var activeIcon, idleIcon;
  if (cf == "true") {
    idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
  } else if (wh == "true") {
    idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
  } else {
    idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
  }
  marker.setIcon(idleIcon);

  var elem = document.getElementById('a' + i);
  if (!!elem) {
    elem.onmouseover = function() {
      marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_orange.png');
    }
    elem.onmouseleave = function() {
      marker.setIcon(idleIcon);
    }
  }
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });

  return marker;
}

Call it like this:

downloadUrl(<?= json_encode($url); ?>, function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var cf = markers[i].getAttribute("cf");
    var wh = markers[i].getAttribute("wh");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    var html = "<b>" + name + "</b> <br/>" + address;
    createMarker(point, cf, wh, html, i, map);
  }

proof of concept fiddle

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆