google-maps - 如何隐藏 Google Maps API 本地上下文地图的上下文侧边栏
问题描述
有没有办法在 Google Maps Javascript API 中隐藏本地上下文地图自动生成的丑陋侧边栏?我浏览了无数帖子,但没有人提到如何隐藏它......?
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: [
{ type: "restaurant" },
{ type: "tourist_attraction" },
],
maxPlaceCount: 12,
});
map = localContextMapView.map;
map.setOptions({
center: { lat: 51.507307, lng: -0.08114 },
zoom: 14,
});
}
解决方案
根据文档,设置placeChooserViewSetup
. layoutMode
隐藏
例子:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: [{
type: "restaurant"
},
{
type: "tourist_attraction"
},
],
maxPlaceCount: 12,
placeChooserViewSetup: {
layoutMode: google.maps.localContext.PlaceChooserLayoutMode.HIDDEN
}
});
代码片段:
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: [{
type: "restaurant"
},
{
type: "tourist_attraction"
},
],
maxPlaceCount: 12,
placeChooserViewSetup: {
layoutMode: google.maps.localContext.PlaceChooserLayoutMode.HIDDEN
}
});
map = localContextMapView.map;
map.setOptions({
center: {
lat: 51.507307,
lng: -0.08114
},
zoom: 14,
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Local Context Basic</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" async></script>
</body>
</html>
推荐阅读
- javascript - 模板JS | 将宿主样式应用于组件
- apache-kafka - Apache flink-kafka 在单个 flink-kafka 消费者组中添加多个消费者
- html - 如何在 VBA 中使用 .querySelectorAll 避免来自 HTML 的重复信息?
- python - 将分而治之的递归算法转换为迭代版本
- spring-integration - Spring Integration WS 出站网关 SSL
- django - 制作用户更新视图时遇到问题
- java - 如何返回异常消息以在 Java 中调用 api?
- javascript - 更改 jsf h:selectOneMenu 的下拉箭头
- vue.js - Ag-Grid sass/webpack 似乎无法从 node_modules 内部解析相对路径
- sql - 无法解释查询 SQL 的 BASIC 文件