谷歌地图折线上的自定义图标图像

Question

需要在Google地图多义线上添加自定义图标图像，我尝试过使用添加自定义图标（如标记）的方法，该按钮不起作用。 这是我尝试过但无法正常工作的代码。

var lineSymbol = {
    anchor: new google.maps.Point(0, 32),
    origin: new google.maps.Point(0, 0),
    scaledSize: new google.maps.Size(32, 32),
    size: new google.maps.Size(64, 64),
    url: "http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png"
  };
  var Line = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: "#35495e",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    icons: [{
            icon: lineSymbol,
            offset: '100%'
          }],
  });

Answer 1

该方法仅适用于SVG符号。在这种情况下，只需在路径末尾使用google.maps.Marker。

var lineSymbol = new google.maps.Marker({
    icon: {
      anchor: new google.maps.Point(0, 32),
      origin: new google.maps.Point(0, 0),
      scaledSize: new google.maps.Size(32, 32),
      size: new google.maps.Size(64, 64),
      url: "http://www.developerdrive.com/wp-content/uploads/2013/08/ddrive.png"
    },
    position: path[path.length-1],
    map: map
});

proof of concept fiddle

代码段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: 'terrain'
  });

  var path = [{lat: 37.772,lng: -122.214},
    {lat: 21.291,lng: -157.821},
    {lat: -18.142,lng: 178.431},
    {lat: -27.467,lng: 153.027}
  ];
  var lineSymbol = new google.maps.Marker({
    icon: {
      anchor: new google.maps.Point(16, 16), // center icon on end of polyline
      origin: new google.maps.Point(0, 0),
      scaledSize: new google.maps.Size(32, 32),
      size: new google.maps.Size(64, 64),
      url: "https://i.stack.imgur.com/7Fzjf.png"
    },
    position: path[path.length - 1],
    map: map
  });
  var Line = new google.maps.Polyline({
    path: path,
    geodesic: true,
    strokeColor: "#35495e",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
  });
  Line.setMap(map);
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < Line.getPath().getLength(); i++) {
    bounds.extend(Line.getPath().getAt(i));
  }
  map.fitBounds(bounds);
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>