<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>最佳视野</title>
<style>
#map{
width: 800px;
height: 800px;
}
</style>
<script src="http://maps.google.cn/maps/api/jskey=你的key&language=en&libraries=drawing,geometry,visualization"></script>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var centerPoint = new google.maps.LatLng(31.2351581719, 121.5060055700); //金茂大厦
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
minZoom: 1,
center: centerPoint,
// styles : styleJson,
zoomControl: false, // 启用/禁用缩放控件
mapTypeControl: false, // 启用/禁用允许用户在地图类型（例如地图和卫星）之间切换的地图类型控件
scaleControl: false, // 启用/禁用提供简单地图比例的“缩放”控件
streetViewControl: false, // 启用/禁用Pegman控件
rotateControl: false, // 启用/禁用旋转控件的外观以控制45°图像的方向
fullscreenControl: false, // 是否全屏 此控件在移动设备上可见，在桌面上不可见
gestureHandling: 'greedy', // 属性设置
// greedy为触摸屏和移动设备，以允许用户在用户滑动（拖动）屏幕时平移地图（向上或向下，向左或向右）。换句话说，单指滑动和双指滑动都可以使地图平移。
});
var pathArr = [new google.maps.LatLng(31.2396628855, 121.4999626581), new google.maps.LatLng(31.2351581719, 121.5060055700)]; //金茂大厦、东方明珠
var bounds = new google.maps.LatLngBounds();
pathArr.forEach(item => {
bounds.extend(item);
})
//调整map，使其适应LatLngBounds,实现展示最佳视野的功能
map.fitBounds(bounds);
</script>
</html>
网友评论