我目前正在为银行项目进行调整，他们需要使用谷歌地图显示银行位置。
问题是该网站已经制作完成，并且对我来说很难解决别人的代码。
谷歌地图位于一个名为contact.php的文件中，它有一个联系表单，谷歌地图设置为背景。我将粘贴Javascript API以查看是否有任何错误
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4Z5K4tM5FBXQH5R__XwqyPzRbQR-fIZY"></script>
<script>
jQuery(document).ready(function($){
$('#btn_onlineb').css('color', '#6ca8cc');
//set your google maps parameters
var latitude = 15.299594,
longitude = -61.387215,
map_zoom = 8;
//google map custom marker icon - .png fallback for IE11
var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
var marker_url = ( is_internetExplorer11 ) ? 'img/pic_zumageo.png' : 'img/pic_zumageo.png';
//define the basic color of your map, plus a value for saturation and brightness
var main_color = '#acc8d4',
saturation_value= -20,
brightness_value= 5;
//we define here the style of the map
var style= [
{
//set saturation for the labels on the map
elementType: "labels",
stylers: [
{saturation: saturation_value}
]
},
{ //poi stands for point of interest - don't show these lables on the map
featureType: "poi",
elementType: "labels",
stylers: [
{visibility: "off"}
]
},
{
//don't show highways lables on the map
featureType: 'road.highway',
elementType: 'labels',
stylers: [
{visibility: "off"}
]
},
{
//don't show local road lables on the map
featureType: "road.local",
elementType: "labels.icon",
stylers: [
{visibility: "off"}
]
},
{
//don't show arterial road lables on the map
featureType: "road.arterial",
elementType: "labels.icon",
stylers: [
{visibility: "off"}
]
},
{
//don't show road lables on the map
featureType: "road",
elementType: "geometry.stroke",
stylers: [
{visibility: "off"}
]
},
//style different elements on the map
{
featureType: "transit",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.government",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.sport_complex",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.attraction",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.business",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "transit",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "transit.station",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "landscape",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "road",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
}
];
//set google map options
var map_options = {
center: new google.maps.LatLng(latitude, longitude),
zoom: map_zoom,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
styles: style,
}
//inizialize the map
var map = new google.maps.Map(document.getElementById('google-container'), map_options);
//add a custom marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
visible: true,
icon: marker_url,
});
//add custom buttons for the zoom-in/zoom-out on the map
function CustomZoomControl(controlDiv, map) {
//grap the zoom elements from the DOM and insert them in the map
var controlUIzoomIn= document.getElementById('cd-zoom-in'),
controlUIzoomOut= document.getElementById('cd-zoom-out');
controlDiv.appendChild(controlUIzoomIn);
controlDiv.appendChild(controlUIzoomOut);
// Setup the click event listeners and zoom-in or out according to the clicked element
google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
console.log("Plus: " + map.getZoom());
map.setZoom(map.getZoom()+1)
});
google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
console.log("Minus: " + map.getZoom());
map.setZoom(map.getZoom()-1)
});
}
var zoomControlDiv = document.createElement('div');
var zoomControl = new CustomZoomControl(zoomControlDiv, map);
//insert the zoom div on the top left of the map
map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
})
请您告诉我哪些CSS样式会将其显示为背景？
答案 0 :(得分：1)
初看你在javascript对象的错误位置有逗号（删除对象最后一个条目的逗号
var map_options = {
center: new google.maps.LatLng(latitude, longitude),
zoom: map_zoom,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
styles: style
}
....
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
visible: true,
icon: marker_url
});
您应该在浏览器控制台中检查其他运行时错误