更改标记图标

时间:2018-11-17 19:37:18

标签: javascript google-maps google-maps-markers google-polyline

我有以下JavaScript代码:

var map;
var locations = [
  ['Mankato, MN', 44.1834814, -93.9774519, 1],
  ['Duluth, MN', 46.7649885, -92.1112232, 2],
  ['Rochester, MN', 43.9959876, -92.4811724, 3],
  ['Fargo, ND', 46.8541979, -96.8285138, 4],
  ['Minneapolis, MN', 44.970697, -93.2614785, 5]
];

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(46.4418595, -93.3655146)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    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
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }

  var lineCoordinates = locations.map(function(val) {
    return new google.maps.LatLng(val[1], val[2]);
  });

  var tripPath = new google.maps.Polyline({
    path: lineCoordinates,
    geodesic: true,
    strokeColor: '#000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  tripPath.setMap(map);
}

initialize();
html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
<div id="map-canvas"></div>

我对javascript完全满意,但是我对HTML有一些基本的经验。我想更改自定义图标的红色标记图标。如何做到这一点?预先感谢,莫里斯

1 个答案:

答案 0 :(得分:0)

只需在现有代码中添加标记的icon属性即可。

marker = new google.maps.Marker({
  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
  map: map,
  // Assign your custom marker image path to icon..
  icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png';
});