使用谷歌地图点击时的活动和非活动标记 [英] Active and not active marker on click using google maps

问题描述

我将如何在点击时实现自定义活动状态，当未激活时，它默认返回到原始自定义标记.我尝试了各种尝试，但这是我得到的最接近的一次.有没有人解决过这个问题?

How would I achieve having a custom active state on click and when not active it defaults back to the original custom marker. I've tried various attempts but this is the closest I've gotten it. Has anyone solved this before?

jQuery(function($) {

    var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1;
    var marker_url = (is_internetExplorer11) ? 'map_marker_highlight.png' : 'map_marker_highlight.png';
    var activeIcon = {
        url: 'map_marker.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(130.3065885, -193.6986437),
        // The anchor for this image is the base of the flagpole at 0,32.
        anchor: new google.maps.Point(16, 40)
    };

    var locations = [
        ['<b>Name</b><br>Address<br>state<br>', 34.845244, -80.371634, 4],
        ['<b>Name</b><br>Address<br>state<br>', 34.845244, -80.371634, 4],
    ];

    var mapOptions = {
        center: new google.maps.LatLng(138.3065885, -193.6986437),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        zoomControl: true,
        scrollwheel: false,
        styles: styles
    };
    map = new google.maps.Map(document.getElementById("mack-map"), mapOptions);

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: marker_url,
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                //console.log(activeIcon);
                infowindow.setContent(locations[i][0]);
                if (infowindow) {
                    this.setIcon(activeIcon)
                } else {
                    this.setIcon(marker_url)
                }
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
});

推荐答案

当点击标记时，将图标设置为活动状态，之后将所有标记设置回它们的默认图标.一种选择(假设对所有标记的引用在数组 markers 中可用):

When the marker is clicked, set the icon to active, after setting all the markers back to their default icon. One option (assumes references to all markers are available in an array markers):

google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    for (var j = 0; j < markers.length; j++) {
      markers[j].setIcon(normalIcon);
    }
    infowindow.setContent(locations[i][0]);
    this.setIcon(activeIcon)
    infowindow.open(map, marker);
  }
})(marker, i));

概念证明小提琴

代码片段:

jQuery(function($) {
  var markers = [];
  var activeIcon = {
    url: 'http://maps.google.com/mapfiles/ms/micons/yellow.png'
  };
  var normalIcon = {
    url: "http://maps.google.com/mapfiles/ms/micons/blue.png"
  };
  var locations = [
    ['<b>Name</b><br>Address<br>state<br>', 34.845244, -80.371634, 4],
    ['<b>Name</b><br>Address<br>state<br>', 34.84, -80.375, 4],
    ['<b>Name</b><br>Address<br>state<br>', 34.86, -80.38, 4]
  ];
  var mapOptions = {
    center: new google.maps.LatLng(34.85, -80.371634),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    zoomControl: true,
    scrollwheel: false
  };
  map = new google.maps.Map(document.getElementById("mack-map"), mapOptions);
  var infowindow = new google.maps.InfoWindow();
  var marker, i;
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
    });
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        for (var j = 0; j < markers.length; j++) {
          markers[j].setIcon(normalIcon);
        }
        infowindow.setContent(locations[i][0]);
        this.setIcon(activeIcon)
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
});

html,
body,
#mack-map {
  height: 100%;
  width: 100%;
  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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mack-map"></div>

这篇关于使用谷歌地图点击时的活动和非活动标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！