Question

我有一套带有一组地图标记的谷歌地图。我选择使用名为pinSymbol（）的函数绘制地图标记 - 而不是使用默认图像。

我想在点击时更改引脚的颜色，但我无法更新它。使用当前代码我可以更改图标的属性，我可以使用console.log（标记）看到它，但是它不会更新地图上的颜色。

问题：如何在点击时重绘图标？

这是我的代码。

// Go through all restaurants and get facebook info,
// then create a marker for each one.

  restaurants.forEach(function(restaurant){
    getFacebookInfo(restaurant);
  }); // end forEach loop 

// Get data from Facebook Graph API and create a marker
  function getFacebookInfo(restaurant){
    $.ajax({
      url : '/restaurants/' + restaurant.id,
      type : 'GET',
      dataType:'json',
      success : function(data) {
          restaurant.about = data.about;
          createMarker(restaurant);
      },
      error : function(request, error) {
        console.log(error);
        alert("We're having some trouble getting a restaurant's info from Facebook. " +
        "Please check your internet connection and try refreshing the page.")
      }
    });
  }

// Create a marker on the map for a location
  function createMarker(restaurant){
  var position = restaurant.location;
  var infowindow = new google.maps.InfoWindow({
  maxWidth: 200
  });

   restaurant.marker = new google.maps.Marker({
     position: position,
     map: map,
     icon: pinSymbol('#CD212A', '#CD212A'),
     name: restaurant.name,
     id: restaurant.id,
     about: restaurant.about,
     animation: google.maps.Animation.DROP
   });

   // Push the marker to array of markers
   markers.push(restaurant.marker);

   // Call populateInfoWindow function
   populateInfoWindow(restaurant.marker, infowindow);

   // Add infowindow as a property to restaurant
   // this makes it available for use outside this function.
   restaurant.infowindow = infowindow;

这就是我被困的地方：

   // Open infowindow when marker is clicked and change color
   restaurant.marker.addListener('click', function(){
     this.icon = pinSymbol('#EED4D9', '#EED4D9');
     console.log(restaurant.marker);
     infowindow.open(map, this);
   });
 }

pinSymbol功能

// Create pin for google map marker
  function pinSymbol(color, strokeColor) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: strokeColor,
        strokeWeight: 1,
        scale: 1,
        labelOrigin: new google.maps.Point(0,-29)
    };
  }

Answer 1

标记没有（记录的）.icon属性。不要使用它。使用记录的.setIcon方法：

// Open infowindow when marker is clicked and change color
restaurant.marker.addListener('click', function() {
  this.setIcon(pinSymbol('#EED4D9', '#EED4D9'));
  console.log(restaurant.marker);
  infowindow.open(map, this);
});

proof of concept fiddle

代码段

var geocoder;
var map;
var markers = [];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  createMarker({
    name: "center",
    id: 2,
    about: "",
    location: {
      lat: 37.4419,
      lng: -122.1419
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);
// Create a marker on the map for a location
function createMarker(restaurant) {
  var position = restaurant.location;
  var infowindow = new google.maps.InfoWindow({
    maxWidth: 200
  });

  restaurant.marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: pinSymbol('#CD212A', '#CD212A'),
    name: restaurant.name,
    id: restaurant.id,
    about: restaurant.about,
    animation: google.maps.Animation.DROP
  });

  // Push the marker to array of markers
  markers.push(restaurant.marker);

  // Call populateInfoWindow function
  populateInfoWindow(restaurant.marker, infowindow);

  // Add infowindow as a property to restaurant
  // this makes it available for use outside this function.
  restaurant.infowindow = infowindow;

  // Open infowindow when marker is clicked and change color
  restaurant.marker.addListener('click', function() {
    if (this.getIcon().fillColor != "#EED4D9") {
      this.setIcon(pinSymbol('#EED4D9', '#EED4D9'));
    } else {
      this.setIcon(pinSymbol('#CD212A', '#CD212A'));
    }
    console.log(restaurant.marker);
    infowindow.open(map, this);
  });
}

// Create pin for google map marker
function pinSymbol(color, strokeColor) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: strokeColor,
    strokeWeight: 1,
    scale: 1,
    labelOrigin: new google.maps.Point(0, -29)
  };
}

function populateInfoWindow(marker, infowindow) {
  infowindow.setContent("content");
};

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

如何在点击时重新绘制谷歌地图标记？

1 个答案: