如何更改谷歌地图中的中转站图标？ [英] How to change the icon of transit stations in google maps?

问题描述

我有自定义样式的谷歌地图。我想将铁路和公共汽车站图标的外观更改为我自己的PNG，但它们似乎不像其他标记一样起作用。是否有可能改变它们？

解决方案

一种选择是隐藏中转图标（或只是公交图标），并将您选择的标记放在相同的位置。然后你需要站点的位置。

  var map;函数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：http：// www .geocodezip.com / 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。 （lat）：53.347913，lng：-6.247165}，{placeId：ChIJFZJPbY0OZ0gRp8t6ffAVCWE，lat： ，{placeId：ChIJOdOOQI0OZ0gRUKpFv3o7AEQ，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,1ng：-6.23502} {placeId： ChIJX9g7SvEOZ0gRys5vUWlD7aE，纬度：53.352063，经度：-6.233089}，{placeId： ChIJH3fLzfYOZ0gR4UOqoWvdNhw，纬度：53.352639，经度：-6.232402}，{placeId： ChIJn_6n1_YOZ0gRtovXaObKKWE，纬度：53.352959，经度：-6.231608 }，{placeId： ChIJXWdle4wOZ0gRGAyVKltGjlA，纬度：53.351128，经度：-6.245534}，{placeId： ChIJ81mp4IsOZ0gROlwgkhh__eA，纬度：53.35287，经度：-6.248538}，{placeId： ChIJtanR-PAOZ0gRydiUCW5F6VE，纬度：53.349911，LNG ：-6.230235}，{placeId： ChIJ86GfP_QOZ0gRxuS4lSrV_EU，纬度：53.35366366064975，LNG：-6.236715316772461}，{placeId： ChIJ2XaPUvQOZ0gRdutDSaj0Ko4，纬度：53.354649828682476，LNG：-6.23798131942749}，{placeId： ChIJT6lqq_UOZ0gRr00DPcLv8WU，纬度：53.35484193668282， lng：-6.238517761230469}，{placeId：ChIJPWurjI8O Z0gRgRn4fsIACMc，纬度：53.347169750741884，LNG：-6.25422477722168}，{placeId： ChIJpWwGCJEOZ0gRPZ-JB7vXAAU，纬度：53.343377977116916，LNG：-6.248044967651367}，{placeId： ChIJW6E5POsOZ0gRhU0Mt66cLcg，纬度：53.33979085385975，LNG：-6.2381744384765625}，{  

html，body，＃map {height：100％;宽度：100％;保证金：0; padding：0;}

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

I have a google map with custom styling. I would like change the appearance of the rail and bus stations icons to my own png but they do not seem to function like other markers. Is it possible to change them?

解决方案

One option would be to hide the transit icons (or just the bus icons), and put markers of your choice in the same locations. You do then need the locations of the stops.

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: "http://www.geocodezip.com/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"></script>

这篇关于如何更改谷歌地图中的中转站图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！