时间戳

首页 > 解决方案 > 更改标记图标

javascript - 更改标记图标

问题描述

我有以下 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 的一个完整的 nob，但我有一些 HTML 的基本经验。我想将红色标记图标更改为自定义图标。怎么可能做到这一点？在此先感谢，莫里斯

标签： javascriptgoogle-mapsgoogle-maps-markersgoogle-polyline

解决方案

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

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

推荐阅读