如何解决如何更改谷歌地图 POI餐厅、咖啡馆等的默认标记颜色?
我正在使用 Google Maps API 创建地图。 我希望除我的标记外的所有标记都具有相同的颜色。 这可能吗?
解决方法
您可以使用 Styled Map 自定义所有“POI”标记的颜色:
styles: [{
"featureType": "poi","elementType": "labels.icon","stylers": [{
"color": "#3db5ff"
},{
"visibility": "on"
}
]
},{
"featureType": "poi","elementType": "labels.text.fill","stylers": [{
"color": "#757575"
}]
},{
"featureType": "poi.attraction",{
"featureType": "poi.business",{
"featureType": "poi.government",{
"featureType": "poi.medical",{
"featureType": "poi.park","stylers": [{
"color": "#9e9e9e"
}]
},{
"featureType": "poi.place_of_worship",],
代码片段:
function initMap() {
// Styles a map in night mode.
const map = new google.maps.Map(document.getElementById("map"),{
center: {
lat: 40.735,lng: -74.0
},zoom: 17,styles: [{
"featureType": "poi",});
map.addListener('bounds_changed',function() {
console.log(map.getCenter() + ":" + map.getZoom())
})
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 90%;
}
/* Optional: Makes the sample page fill the window. */
html,body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Styled Maps - Blue POI Markers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly"
defer
></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。