我得到了我的 API key ,并像这样构造了我的嵌入代码:
<iframe
id="map-canvas"
width="450"
height="250"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/view?key=MYKEY¢er=LAT,LNG&zoom=12&maptype=roadmap" allowfullscreen>
</iframe>
到目前为止一切顺利。 现在,我试图隐藏 map 的默认用户界面。 Google 的文档为我提供了这段代码:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
令我困惑的是,这段代码试图再次创建 map ,但我的代码已经显示为 <iframe>
上面的标记。我试过添加 map-canvas
id 到我的 iframe,但脚本不会影响它。
最佳答案
您可以通过在 html 中添加空 div 来简单地创建 map :
<div id="map-canvas"></div>
然后就可以通过JS初始化了:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true
};
// Create new map object (gets element by id #map-canvas)
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
通过JS初始化 map 时无需添加iframe。
如果您希望完全禁用 Google map 用户界面,请查看:https://developers.google.com/maps/documentation/javascript/examples/control-disableUI
关于javascript - Google Maps API 如何在 iframe 中隐藏 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31301624/