如何在谷歌地图中更改中转站的图标？

Question

我有一个自定义样式的谷歌地图。我希望将铁路和汽车站图标的外观更改为我自己的png，但它们似乎不像其他标记那样起作用。有没有可能改变它们？

​

​

Answer 1

一种选择是隐藏交通图标(或仅公共汽车图标)，并在相同的位置放置您选择的标记。然后，您需要停靠点的位置。

proof of concept fiddle

​

​

​

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 53.3507456,
      lng: -6.2393441
    },
    zoom: 16,
    mapTypeControl: false,
    styles: [{
      featureType: 'transit',
      elementType: 'labels.icon',
      stylers: [{
        visibility: 'off'
      }]
    }]
  });
  for (var i = 0; i < transitStops.length; i++) {
    var tmark = new google.maps.Marker({
      position: transitStops[i],
      map: map,
      icon: {
        url: "https://www.geocodezip.net/mapIcons/bus_blue.png",
        scaledSize: new google.maps.Size(10, 10),
        anchor: new google.maps.Point(5, 5)
      }
    })
  }


  google.maps.event.addListener(map, 'click', function(evt) {
    console.log("{placeId:" + evt.placeId + ", lat: " + evt.latLng.lat() + ", lng: " + evt.latLng.lng() + "}");
  });
}
var transitStops = [{
  placeId: "ChIJP_OC240OZ0gRTwu09OWnk_U",
  lat: 53.347913,
  lng: -6.247165
}, {
  placeId: "ChIJFZJPbY0OZ0gRp8t6ffAVCWE",
  lat: 53.347695,
  lng: -6.243303
}, {
  placeId: "ChIJOd0OQI0OZ0gRUKpFv3o7AEQ",
  lat: 53.347759,
  lng: -6.242445
}, {
  placeId: "ChIJe1pTa40OZ0gR_e129---hi8",
  lat: 53.347746,
  lng: -6.24193
}, {
  placeId: "ChIJKzM8uvIOZ0gRtYKquNyaiYc",
  lat: 53.347528,
  lng: -6.239698
}, {
  placeId: "ChIJywS6evIOZ0gRhNm96pmOHlU",
  lat: 53.347388,
  lng: -6.236351
}, {
  placeId: "ChIJF-4BzfMOZ0gRkEbmpj60Ub0",
  lat: 53.349668,
  lng: -6.235256
}, {
  placeId: "ChIJQ6qDDfMOZ0gRBfF7TUP_Zi8",
  lat: 53.350398,
  lng: -6.238668
}, {
  placeId: "ChIJQ9tx_PMOZ0gRJsmjoHdrYEI",
  lat: 53.351781,
  lng: -6.23502
}, {
  placeId: "ChIJX9g7SvEOZ0gRys5vUWlD7aE",
  lat: 53.352063,
  lng: -6.233089
}, {
  placeId: "ChIJH3fLzfYOZ0gR4UOqoWvdNhw",
  lat: 53.352639,
  lng: -6.232402
}, {
  placeId: "ChIJn_6n1_YOZ0gRtovXaObKKWE",
  lat: 53.352959,
  lng: -6.231608
}, {
  placeId: "ChIJXWdle4wOZ0gRGAyVKltGjlA",
  lat: 53.351128,
  lng: -6.245534
}, {
  placeId: "ChIJ81mp4IsOZ0gROlwgkhh__eA",
  lat: 53.35287,
  lng: -6.248538
}, {
  placeId: "ChIJtanR-PAOZ0gRydiUCW5F6VE",
  lat: 53.349911,
  lng: -6.230235
}, {
  placeId: "ChIJ86GfP_QOZ0gRxuS4lSrV_EU",
  lat: 53.35366366064975,
  lng: -6.236715316772461
}, {
  placeId: "ChIJ2XaPUvQOZ0gRdutDSaj0Ko4",
  lat: 53.354649828682476,
  lng: -6.23798131942749
}, {
  placeId: "ChIJT6lqq_UOZ0gRr00DPcLv8WU",
  lat: 53.35484193668282,
  lng: -6.238517761230469
}, {
  placeId: "ChIJPWurjI8OZ0gRgRn4fsIACMc",
  lat: 53.347169750741884,
  lng: -6.25422477722168
}, {
  placeId: "ChIJpWwGCJEOZ0gRPZ-JB7vXAAU",
  lat: 53.343377977116916,
  lng: -6.248044967651367
}, {
  placeId: "ChIJW6E5POsOZ0gRhU0Mt66cLcg",
  lat: 53.33979085385975,
  lng: -6.2381744384765625
}, {
  placeId: "ChIJG4-0NcIOZ0gRbapaqYSiEm0",
  lat: 53.33384581380873,
  lng: -6.22899055480957
}];

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

<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

​