我在这个网站http://www.eduardoamaral.com.br/site/contato/
中看到了这个漂亮的谷歌地图嵌入式实施我检查了代码,它似乎是一个框架,但我真的不能告诉它,任何人都可以帮我找到它是什么吗?
答案 0 :(得分:1)
再次查看代码检查,查找显示//we define here the style of the map
的行,该代码部分改变了Google地图的外观。
要进一步定制,您可以在此处查看这些网站:
答案 1 :(得分:0)
我相信他们只是使用Google Maps API并调整渲染地图的样式。这是API的链接。 https://developers.google.com/maps/
您还可以深入了解他们正在进行的函数调用。进入开发人员开发人员工具(假设您使用的是Chrome,但在其他浏览器上也是如此)。然后在开发人员工具窗格的顶部栏中选择“源”。在开发人员工具窗格左侧的sources部分中找到索引文件。按显示代码部分底部的{}按钮。这将使代码可读。然后浏览它以查看与Google地图相关的内容。您也可以使用ctrl + f进行搜索。
我建议您只浏览Google Maps API网站。
答案 2 :(得分:0)
您可以在声明新地图时设置样式,时髦地图是Google地图配色方案的理想资源。
尝试以下操作,只需将this.refs.map替换为您正在使用的任何内容(来自here的颜色方案):
var mapStyle =[
{
"featureType": "administrative.country",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ededed"
},
{
"gamma": "0.00"
},
{
"lightness": "-100"
},
{
"saturation": "-67"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "all",
"stylers": [
{
"saturation": 7
},
{
"lightness": 19
},
{
"visibility": "on"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
},
{
"saturation": "-3"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#abb1c8"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"hue": "#ffffff"
},
{
"saturation": -100
},
{
"lightness": 100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [
{
"lightness": "20"
},
{
"saturation": "-26"
},
{
"gamma": "2.33"
},
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"hue": "#ff0000"
},
{
"saturation": -100
},
{
"lightness": 100
},
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"lightness": "-19"
}
]
},
{
"featureType": "poi.medical",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"saturation": "100"
},
{
"lightness": 31
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"hue": "#008eff"
},
{
"saturation": -93
},
{
"lightness": 31
},
{
"visibility": "on"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#d2d1d1"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"lightness": "3"
},
{
"color": "#ebebeb"
},
{
"saturation": "-17"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"lightness": "-15"
},
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#e8e8e8"
},
{
"saturation": "0"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels",
"stylers": [
{
"hue": "#bbc0c4"
},
{
"saturation": -93
},
{
"lightness": -2
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"hue": "#4e00ff"
},
{
"saturation": "-100"
},
{
"lightness": "100"
},
{
"visibility": "simplified"
},
{
"weight": "1"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": 10
},
{
"lightness": 69
},
{
"visibility": "on"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#e7e7e7"
}
]
},
{
"featureType": "transit.station.bus",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "transit.station.bus",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"hue": "#e9ebed"
},
{
"saturation": -78
},
{
"lightness": 67
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"lightness": "-3"
}
]
}
]
var map = new google.maps.Map(this.refs.map,{
center: center,
zoom: 10,
styles : mapStyle
});