我正在尝试将放置的图钉或自定义弹出窗口添加到样式化的Google地图中。每次尝试添加图钉时，贴图都会重置为其默认颜色。关于如何使两者一起工作的任何线索？
这是样式脚本：
function initMap() {
// Create a new StyledMapType object, passing it an array of styles,
// and the name to be displayed on the map type control.
var styledMapType = new google.maps.StyledMapType(
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#523735"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#c9b2a6"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#dcd2be"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ae9e90"
}
]
},
{
"featureType": "administrative.neighborhood",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#93817c"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#a5b076"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#447530"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#f5f1e6"
}
]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#fdfcf8"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#f8c967"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#e9bc62"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#e98d58"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#db8555"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#806b63"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8f7d77"
}
]
},
{
"featureType": "transit.line",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ebe3cd"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#dfd2ae"
}
]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#b9d3c2"
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#92998d"
}
]
}
],
{name: 'Styled Map'});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 52.5200, lng: 13.4050},
zoom: 10,
mapTypeControlOptions: {
mapTypeIds: []
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
</script>
这是固定脚位脚本：
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
如果有一种方法可以仅使用javascript在地图上添加弹出框，那也将很棒。目前，我正在混合js和CSS，但该网站托管在cargocollective上，并且平台有时会在重新加载时删除div。
谢谢！
答案 0 :(得分：0)
不能有两个具有相同名称的函数。
还在第二个功能中，您重新创建了地图，这就是为什么颜色会重置为默认值。
function initMap() {
// Create a new StyledMapType object, passing it an array of styles,
// and the name to be displayed on the map type control.
var styledMapType = new google.maps.StyledMapType(
[{
"elementType": "geometry",
"stylers": [{
"color": "#ebe3cd"
}]
},
{
"elementType": "labels.text.fill",
"stylers": [{
"color": "#523735"
}]
},
{
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#f5f1e6"
}]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#c9b2a6"
}]
},
{
"featureType": "administrative.land_parcel",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "administrative.land_parcel",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#dcd2be"
}]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#ae9e90"
}]
},
{
"featureType": "administrative.neighborhood",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "landscape.natural",
"elementType": "geometry",
"stylers": [{
"color": "#dfd2ae"
}]
},
{
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#dfd2ae"
}]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#93817c"
}]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#a5b076"
}]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#447530"
}]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"color": "#f5f1e6"
}]
},
{
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.arterial",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#fdfcf8"
}]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#f8c967"
}]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#e9bc62"
}]
},
{
"featureType": "road.highway",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [{
"color": "#e98d58"
}]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#db8555"
}]
},
{
"featureType": "road.local",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#806b63"
}]
},
{
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [{
"color": "#dfd2ae"
}]
},
{
"featureType": "transit.line",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#8f7d77"
}]
},
{
"featureType": "transit.line",
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#ebe3cd"
}]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [{
"color": "#dfd2ae"
}]
},
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#b9d3c2"
}]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#92998d"
}]
}
], {
name: 'Styled Map'
});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 52.5200,
lng: 13.4050
},
zoom: 10,
mapTypeControlOptions: {
mapTypeIds: []
}
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
var myLatLng = {
lat: -25.363,
lng: 131.044
};
map.setCenter(myLatLng);
map.setZoom(4);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
initMap();<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="width:100%;height:300px;">
</div>