<!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/js?key=你的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为触摸屏和移动设备，以允许用户在用户滑动（拖动）屏幕时平移地图（向上或向下，向左或向右）。换句话说，单指滑动和双指滑动都可以使地图平移。
});
// 起始点可以放mark标记
// var marker = new google.maps.Marker({
// position: centerPoint,
// icon: {
// url: "/static/modular/biz/risk/dsmManager/img/iconCar.png",
// scaledSize: new google.maps.Size(25, 19),
// },
// map: map
// });
var pathArr = [new google.maps.LatLng(31.2396628855, 121.4999626581), new google.maps.LatLng(31.2351581719,121.5060055700)]; //金茂大厦、东方明珠
showPolyLine(pathArr,"red");
var bounds = new google.maps.LatLngBounds();
pathArr.forEach(item => {
bounds.extend(item);
})
//调整map，使其适应LatLngBounds,实现展示最佳视野的功能
map.fitBounds(bounds);
function showPolyLine(polyLineArr, color) {
var flightPath = new google.maps.Polyline({
path: polyLineArr,
geodesic: true,
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 4
});
flightPath.setMap(map);
};
</script>
</html>
谷歌地图折线
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
