如何在相当典型的 Google 地图上放置街景按钮,使其与右上角的标准地图/卫星/混合按钮一致?我见过这样的一个例子,但现在找不到了。所以,我知道这是可能的。
确实是的,人们可以在地图选项中指定控制位置——寻找控制定位 in the 在线文档 https://developers.google.com/maps/documentation/javascript/controls.
如何指定Google地图控件位置
为了将街景控件定位在右上角,添加
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
到您的地图选项。
检查此演示(使用 Google 地图 API 版本 3):
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
center: myLatlng,
zoom: 5,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
#map_canvas {
width: 300px;
height: 200px;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
这是一个控制定位的另一个例子 https://developers.google.com/maps/documentation/javascript/examples/control-positioning在官方文档中。
控制放置标识符
这些都是 Google 地图控件可能的位置(来自TOP_LEFT
to BOTTOM_RIGHT
):
+----------------+
+ TL TC TR +
+ LT RT +
+ +
+ LC RC +
+ +
+ LB RB +
+ BL BC BR +
+----------------+
有关职位及其工作方式的完整列表,请参阅https://developers.google.com/maps/documentation/javascript/3.exp/reference#ControlPosition https://developers.google.com/maps/documentation/javascript/3.exp/reference#ControlPosition
以编程方式更改控制位置
您还可以使用以下命令在创建地图后动态更改位置SetOptions
的方法google.maps.Map class https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map。在此示例中,我使用上面的方法创建了一个地图streetViewControl
就位TOP_RIGHT
然后将其更改为LEFT_BOTTOM
:
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
center: myLatlng,
zoom: 5,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// now change position to LEFT_BOTTOM changing streetViewControlOptions
// with setOptions
map.setOptions({
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
#map_canvas {
width: 300px;
height: 200px;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)