Google Maps-获取API关键拖与javascript样式一起使用
我的网站模板在Google地图上具有一些非常酷的样式，在Google希望我获取API代码之前，该样式一直非常有效。得到的代码和地图可以使用基本样式https://spcadbn.org.za/Untitled-1.html
但是无法弄清楚如何将代码添加到我的Java脚本中，如下所示：
google.maps.event.addDomListener(window, 'load', init);
var myLatlng = new google.maps.LatLng(-29.803562, 30.993815);
function init() {
var myMapOptions = {
zoom: 14,
center: myLatlng,
styles: [{
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#cdd9d9"
}, {
"weight": 0.1
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"saturation": -100
}, {
"lightness": 65
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": -100
}, {
"lightness": 51
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": -100
}]
}, {
"featureType": "road.arterial",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"saturation": -100
}, {
"lightness": 30
}]
}, {
"featureType": "road.local",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"saturation": -100
}, {
"lightness": 40
}]
}, {
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": -100
}]
}, {
"featureType": "administrative.province",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"saturation": -100
}, {
"lightness": -25
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [
]
}, {
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#E6A329"
}, {
"weight": 1
}]
}]
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, myMapOptions);
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<div id="mapInfoBox">' +
'<br><h2 id="firstHeading" class="firstHeading">Find us</h2>' +
'<h4><i class="fa fa-car text-primary"></i> <b>Cnr Inanda Rd/Willowfield Cres, Springfield Park</b></h4>' +
'<h4><i class="fa fa-envelope text-primary"></i> <b>info@spcadbn.org.za</b></h4>' +
'<h4><i class="fa fa-phone text-primary"></i> <b>+27 0 31 579 6500</b></h4><br>' +
'<h4>Opening hours:</h4>' +
'<p>Mon-Fri: 8am–4pm Saturday: 8am-12.30pm <br>Closed Sundays and public holidays</p>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'img/map-marker.png',
});
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
infowindow.open(map, marker);
});
}
2 个答案:
答案 0 :(得分：0)
为了使您的地图正常工作并且不显示错误消息，您需要确保在调用自己的init函数之前包含google api脚本-更重要的是，不需要api uri调用Google Map时经常看到的callback参数。使用async实例化地图时，也不再需要使用defer和google.maps.event.addDomListener(window, 'load', init);-我认为您选择使用哪种方法是个人喜好。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>SPCA - Durban & Coast</title>
<style>
#map{width:80%;height:80vh;margin:auto;float:none;}
</style>
<!--
As you are using `google.maps.event.addDomListener(window, 'load', init);` the script url below
does not require the `callback` argument with, usually, `initMap`
The actual code below is unchanged from that above in the question...
-->
<script src='//maps.googleapis.com/maps/api/js?key=<APIKEY>'></script>
<script>
google.maps.event.addDomListener(window, 'load', init);
var myLatlng = new google.maps.LatLng(-29.803562, 30.993815);
function init() {
var myMapOptions = {
zoom: 14,
center: myLatlng,
styles: [{
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"color": "#cdd9d9"
}, {
"weight": 0.1
}]
}, {
"featureType": "landscape",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"saturation": -100
}, {
"lightness": 65
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": -100
}, {
"lightness": 51
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": -100
}]
}, {
"featureType": "road.arterial",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"saturation": -100
}, {
"lightness": 30
}]
}, {
"featureType": "road.local",
"elementType": "all",
"stylers": [{
"visibility": "on"
}, {
"saturation": -100
}, {
"lightness": 40
}]
}, {
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": -100
}]
}, {
"featureType": "administrative.province",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}, {
"saturation": -100
}, {
"lightness": -25
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [
]
}, {
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#E6A329"
}, {
"weight": 1
}]
}]
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, myMapOptions);
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<div id="mapInfoBox">' +
'<br><h2 id="firstHeading" class="firstHeading">Find us</h2>' +
'<h4><i class="fa fa-car text-primary"></i> <b>Cnr Inanda Rd/Willowfield Cres, Springfield Park</b></h4>' +
'<h4><i class="fa fa-envelope text-primary"></i> <b>info@spcadbn.org.za</b></h4>' +
'<h4><i class="fa fa-phone text-primary"></i> <b>+27 0 31 579 6500</b></h4><br>' +
'<h4>Opening hours:</h4>' +
'<p>Mon-Fri: 8am–4pm Saturday: 8am-12.30pm <br>Closed Sundays and public holidays</p>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'img/map-marker.png',
});
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
infowindow.open(map, marker);
});
}
</script>
</head>
<body>
<!-- lots of other page content -->
<div id='map'></div>
</body>
</html>
使用实际的密钥进行了测试，并加载良好-祝您好运。
答案 1 :(得分：-1)
不要在Window.Load事件上使用init函数。只要API准备就绪，API就会在<script async defer src="https://maps.googleapis.com/maps/api/js?key=yourkey&callback=init">中调用回调。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？