谷歌地图最佳视野

<!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>
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容