我最近在我的网站上添加了一张谷歌地图。但它没有显示地图标记。我在这里使用谷歌地图的自定义颜色样式 我的网站链接:
我编码如下:
<script>
window.onload = function () {
var styles = [
{
"featureType": "landscape",
"stylers": [
{
"saturation": -100
},
{
"lightness": 65
},
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"saturation": -100
},
{
"lightness": 51
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"stylers": [
{
"saturation": -100
},
{
"lightness": 30
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"saturation": -100
},
{
"lightness": 40
},
{
"visibility": "on"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.province",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
},
{
"lightness": -25
},
{
"saturation": -100
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"hue": "#ffff00"
},
{
"lightness": -25
},
{
"saturation": -97
}
]
}
];
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(55.681527, 12.591067),
zoom: 14,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
var div = document.getElementById('gmap');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
};
答案 0 :(得分:0)
我认为函数调用存在一些问题,你可以尝试这个并让我知道。
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
window.onload=function(){ var styles = [
{
"featureType": "landscape",
"stylers": [
{
"saturation": -100
},
{
"lightness": 65
},
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"saturation": -100
},
{
"lightness": 51
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"stylers": [
{
"saturation": -100
},
{
"lightness": 30
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"saturation": -100
},
{
"lightness": 40
},
{
"visibility": "on"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.province",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
},
{
"lightness": -25
},
{
"saturation": -100
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"hue": "#ffff00"
},
{
"lightness": -25
},
{
"saturation": -97
}
]
}
];
var options = {
mapTypeControlOptions: {
mapTypeIds: ['Styled']
},
center: new google.maps.LatLng(55.681527, 12.591067),
zoom: 14,
disableDefaultUI: true,
mapTypeId: 'Styled'
};
var div = document.getElementById('gmap');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var markers=new google.maps.Marker({
position:new google.maps.LatLng(55.681527, 12.591067),
map:map,
title:'Clavis Capital',
});
}
</script>