GoogleMapsV3-----基础地图

最新推荐文章于 2019-08-04 12:44:29 发布
solicitous
最新推荐文章于 2019-08-04 12:44:29 发布
阅读量718
点赞数
分类专栏： googleMapV3 文章标签：圆地图初始化多边形测量面积标记画线测量距离
本文链接：https://blog.csdn.net/solicitous/article/details/8536666
版权
googleMapV3 专栏收录该内容
7 篇文章 0 订阅
订阅专栏
<html><head>    <style type="text/css">        html        {            height: 100%;        }        body        {            height: 100%;            margin: 0px;            padding: 0px;        }        #map_canvas        {            height: 80%;        }    </style>    <script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.9&sensor=false®ion=cn"> </script>    <script type="text/javascript">        var map = null;        //添加的标记组        var markersArray = [];        //线        var myPolyline = null;        //多边形        var bermudaTriangle = null;        //圆数组        var myCircle=[];        var myCircleArray=[];        //左键单击事件        var clickEvent = null;        //右键单击事件        var rightEvent = null;        //【初始化地图】        //===========================================================================================        function initialize() {            //构建经纬度点            var latlng = new google.maps.LatLng(30.277925, 120.177597);            var myOptions =            {                zoom: 8,                center: latlng,                mapTypeId: google.maps.MapTypeId.HYBRID,                //关闭 API 的默认用户界面设置                disableDefaultUI: true,                //标尺                scaleControl: true,                scaleControlOptions: {                    position: google.maps.ControlPosition.RIGHT_BOTTOM                },                //缩放                zoomControl: true,                zoomControlOptions: {                    position: google.maps.ControlPosition.LEFT_TOP,                    style: google.maps.ZoomControlStyle.LARGE                },                streetViewControl: true            };            //【js调试关键字】                        //debugger;            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);                        //-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.            //设置线样式            var polyOptions = {                strokeColor: '#000000',                strokeOpacity: 1.0,                strokeWeight: 3            }            //新建一条线            myPolyline = new google.maps.Polyline(polyOptions);            myPolyline.setMap(map);            //-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.            //设置多边形样式            bermudaTriangle = new google.maps.Polygon({                //                paths: triangleCoords,                strokeColor: "#FF0000",                strokeOpacity: 0.8,                strokeWeight: 2,                fillColor: "#FF0000",                fillOpacity: 0.35            });            bermudaTriangle.setMap(map);            //-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.            //信息窗口            var myInfoWindowDiv = "<div>杭州</div>";            var infowindow = new google.maps.InfoWindow({ content: myInfoWindowDiv });            var marker = new google.maps.Marker({ position: latlng, map: map, title: "信息窗口" });            infowindow.open(map, marker);            //=======================================================================================//获取坐标对应的像素//            overlay = new google.maps.OverlayView();//            overlay.draw = function () { };//            overlay.setMap(map);//            var point = overlay.getProjection().fromLatLngToDivPixel(latLng);             //========================================================================================        }        //===========================================================================================        //【中心坐标】        //===========================================================================================        //----获取中心坐标点----        function map_getCenter() {            document.getElementById("lat_setCenter").value = map.getCenter().lat();            document.getElementById("lng_setCenter").value = map.getCenter().lng();        }        //----设置中心坐标点----        function map_setCenter() {            var latlng = new google.maps.LatLng(document.getElementById("lat_setCenter").value, document.getElementById("lng_setCenter").value);            map.setCenter(latlng);        }        //===========================================================================================        //【地图类型】        //===========================================================================================        //----获取地图类型----        function map_getMapTypeId() {            document.getElementById("type_setMapTypeId").value = map.getMapTypeId().toUpperCase();        }        //----设置地图类型----        function map_setMapTypeId() {            if (document.getElementById("type_setMapTypeId").value == "HYBRID") {                map.setMapTypeId(google.maps.MapTypeId.HYBRID);            } else if (document.getElementById("type_setMapTypeId").value == "ROADMAP") {                map.setMapTypeId(google.maps.MapTypeId.ROADMAP);            } else if (document.getElementById("type_setMapTypeId").value == "SATELLITE") {                map.setMapTypeId(google.maps.MapTypeId.SATELLITE);            } else if (document.getElementById("type_setMapTypeId").value == "TERRAIN") {                map.setMapTypeId(google.maps.MapTypeId.TERRAIN);            }        }        //===========================================================================================        //【缩放比例】        //===========================================================================================        //----获取缩放比例----        function map_getZoom() {            document.getElementById("size_zoom").value = map.getZoom();//            alert(map.getProjection() == null)//            alert(map.getProjection().fromLatLngToPoint(new google.maps.LatLng(30.277925, 120.177597)).toString())        }        //----设置缩放比例----        function map_setZoom() {            map.setZoom(parseFloat(document.getElementById("size_zoom").value));        }        //===========================================================================================        //【以像素为单位移动地图】        //===========================================================================================        function map_panBy() {            map.panBy(parseFloat(document.getElementById("x_panBy").value), parseFloat(document.getElementById("y_panBy").value))        }        //===========================================================================================        //【以经纬度为单位移动地图】        //===========================================================================================        function map_panTo() {            var latlng = new google.maps.LatLng(parseFloat(document.getElementById("lat_panTo").value), parseFloat(document.getElementById("lng_panTo").value));            map.panTo(latlng);        }        //===========================================================================================        //【鼠标左键添加标记右键删除标记】        //===========================================================================================        //----启用----        function add_delete_Marker() {            //左键单击事件清空            if (clickEvent != null) {                google.maps.event.removeListener(clickEvent);                clickEvent = null;            }            //鼠标左键添加标记            clickEvent = google.maps.event.addListener(map, 'click', function (event) {                var marker = null;                if (document.getElementById("imgUrl_Marker").value == "" || document.getElementById("imgUrl_Marker").value == undefined) {                    marker = new google.maps.Marker({                        position: event.latLng,                        map: map,                        //BOUNCE一直跳到指定停止，DROP跳一下                        animation: google.maps.Animation.DROP                    });                } else {                    marker = new google.maps.Marker({                        position: event.latLng,                        map: map,                        //BOUNCE一直跳到指定停止，DROP跳一下                        animation: google.maps.Animation.DROP,                        icon: document.getElementById("imgUrl_Marker").value                    });                }                map.setCenter(event.latLng);                markersArray.push(marker);            });            //右键单击事件清空            if (rightEvent != null) {                google.maps.event.removeListener(rightEvent);                rightEvent = null;            }            //鼠标右键清除标记            rightEvent = google.maps.event.addDomListener(map, 'rightclick', function (event) {                if (markersArray) {                    for (i in markersArray) {                        markersArray[i].setMap(null);                    }                    markersArray.length = 0;                }            });        }        //----停用----        function stop_add_delete_Marker() {            //鼠标左键添加标记            google.maps.event.removeListener(clickEvent);            clickEvent = null;            //鼠标右键清除标记            google.maps.event.removeListener(rightEvent);            rightEvent = null;        }        //===========================================================================================        //【鼠标画线，右键删除】        //===========================================================================================        function add_delete_Polyline() {            //左键单击事件清空            if (clickEvent != null) {                google.maps.event.removeListener(clickEvent);                clickEvent = null;            }            //鼠标左键画线            clickEvent = google.maps.event.addListener(map, 'click', function (event) {                myPolyline.getPath().push(event.latLng);                //测距                google.maps.LatLng.prototype.distanceFrom = function (latlng) {                    //this.表示当前点的，latlng.表示是传入的                    var lat = [this.lat(), latlng.lat()]                    var lng = [this.lng(), latlng.lng()] //var R = 6371; // km (change this constant to get miles)                    var R = 6378137; // In meters                    var dLat = (lat[1] - lat[0]) * Math.PI / 180;                    var dLng = (lng[1] - lng[0]) * Math.PI / 180;                    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat[0] * Math.PI / 180) * Math.cos(lat[1] * Math.PI / 180) * Math.sin(dLng / 2) * Math.sin(dLng / 2);                    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));                    var d = R * c;                    return Math.round(d);                }                google.maps.Polyline.prototype.getLength = function () {                    //距离                    var d = 0;                    //路径                    var path = this.getPath();                    //经纬度数组                    var latlng;                    //循环累计距离                    for (var i = 0; i < path.getLength() - 1; i++) {                        //当前点与下一个点的经纬度                        latlng = [path.getAt(i), path.getAt(i + 1)];                        //计算距离累加                        d += latlng[0].distanceFrom(latlng[1]);                    }                    return d;                }                document.getElementById("length_Polyline").innerHTML = (myPolyline.getLength() / 1000).toFixed(3);            });            //右键单击事件清空            if (rightEvent != null) {                google.maps.event.removeListener(rightEvent);                rightEvent = null;            }            //鼠标右键清除线            rightEvent = google.maps.event.addDomListener(map, 'rightclick', function (event) {                while (myPolyline.getPath().length > 0) {                    myPolyline.getPath().pop();                }            });        }        //----停用----        function stop_add_delete_Polyline() {            //鼠标左键添加标记            google.maps.event.removeListener(clickEvent);            clickEvent = null;            //鼠标右键清除标记            google.maps.event.removeListener(rightEvent);            rightEvent = null;        }        //===========================================================================================        //【鼠标多边形，右键删除】        //===========================================================================================        function add_delete_Polygon() {            //左键单击事件清空            if (clickEvent != null) {                google.maps.event.removeListener(clickEvent);                clickEvent = null;            }            //鼠标左键画线            clickEvent = google.maps.event.addListener(map, 'click', function (event) {                bermudaTriangle.getPath().push(event.latLng);                document.getElementById("area_Polygon").innerHTML = (bermudaTriangle.getArea()).toFixed(3) + "km²";            });            google.maps.Polygon.prototype.getArea = function () {                var area = 0;                var path = this.getPath();                var i, j;                var N = path.getLength();                for (i = 0; i < N; i++) {                    j = (i + 1) % N;                    area += path.getAt(i).lat() * path.getAt(j).lng();                    area -= path.getAt(i).lng() * path.getAt(j).lat();                }                area /= 2;                area = area * 10000;                return Math.abs(area);                // var area = 0;                // var path = this.getPath();                // if (path.getLength() >= 3) {                //  p1 = path.getAt(0);                //  for (var i = 1; i < path.getLength() - 1; i++) {                //   p2 = path.getAt(i);                //   p3 = path.getAt(i + 1);                //   area += ((p1.lat() * p2.lng() + p2.lat() * p3.lng() + p3.lat() * p1.lng()) - (p1.lat() * p3.lng() + p2.lat() * p1.lng() + p3.lat() * p2.lng())) / 2;                //  }                //  area = area * 10000;                // }                // return Math.abs(area);            }            //右键单击事件清空            if (rightEvent != null) {                google.maps.event.removeListener(rightEvent);                rightEvent = null;            }            //鼠标右键清除线            rightEvent = google.maps.event.addDomListener(map, 'rightclick', function (event) {                while (bermudaTriangle.getPath().length > 0) {                    bermudaTriangle.getPath().pop();                }            });        }        //----停用----        function stop_add_delete_Polygon() {            //鼠标左键添加标记            google.maps.event.removeListener(clickEvent);            clickEvent = null;            //鼠标右键清除标记            google.maps.event.removeListener(rightEvent);            rightEvent = null;        }        //===========================================================================================        //【鼠标圆形，右键删除】        //===========================================================================================        function add_delete_Circle() {            //左键单击事件清空            if (clickEvent != null) {                google.maps.event.removeListener(clickEvent);                clickEvent = null;            }            //鼠标左键画圆            clickEvent = google.maps.event.addListener(map, 'click', function (event) {                myCircle.push(event.latLng);                if (myCircle.length % 2 == 1 || myCircle == null) {                } else {                    //                     debugger;                    var myCircleOptions = {                        strokeColor: "#FF0000",                        strokeOpacity: 0.8,                        strokeWeight: 2,                        fillColor: "#FF0000",                        fillOpacity: 0.35,                        map: map,                        center: myCircle[myCircle.length - 2],                        radius: myCircle[myCircle.length - 2].distanceFrom(myCircle[myCircle.length - 1])                    }                    var x = new google.maps.Circle(myCircleOptions);                    myCircleArray.push(x);                }            });            google.maps.LatLng.prototype.distanceFrom = function (latlng) {                    //this.表示当前点的，latlng.表示是传入的                    var lat = [this.lat(), latlng.lat()]                    var lng = [this.lng(), latlng.lng()] //var R = 6371; // km (change this constant to get miles)                    var R = 6378137; // In meters                    var dLat = (lat[1] - lat[0]) * Math.PI / 180;                    var dLng = (lng[1] - lng[0]) * Math.PI / 180;                    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat[0] * Math.PI / 180) * Math.cos(lat[1] * Math.PI / 180) * Math.sin(dLng / 2) * Math.sin(dLng / 2);                    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));                    var d = R * c;                    return Math.round(d);                }                //右键单击事件清空                if (rightEvent != null) {                    google.maps.event.removeListener(rightEvent);                    rightEvent = null;                }                //鼠标右键清除圆                rightEvent = google.maps.event.addDomListener(map, 'rightclick', function (event) {                    for (var i = 0; i < myCircleArray.length; i++) {                        myCircleArray[i].setMap(null);                     }                    myCircleArray.length = 0;                });        }        //----停用----        function stop_add_delete_Circle() {            //鼠标左键添加标记            google.maps.event.removeListener(clickEvent);            clickEvent = null;            //鼠标右键清除标记            google.maps.event.removeListener(rightEvent);            rightEvent = null;        }        //===========================================================================================    </script></head><body οnlοad="initialize()">    <div id="map_canvas" style="width: 80%; height: 100%; float: left;">    </div>    <div id="Div1" style="width: 20%; height: 100%; overflow: scroll;">        <hr />        <p style="text-align: center;">            【中心坐标点】<br />            纬度：<input type="text" id="lat_setCenter" /><br />            经度：<input type="text" id="lng_setCenter" /><br />            <button type="button" οnclick="map_getCenter()">                获取</button>                            <button type="button" οnclick="map_setCenter()">                设置</button><br />        </p>        <hr />        <p style="text-align: center;">            【地图类型】<br />            <select id="type_setMapTypeId">                <option value="HYBRID">普通视图和卫星视图</option>                <option value="ROADMAP">默认的道路地图视图</option>                <option value="SATELLITE">Google 地球卫星图像</option>                <option value="TERRAIN">根据地形信息显示实际地图</option>            </select>            <br />            <button type="button" οnclick="map_getMapTypeId()">                获取</button>                            <button type="button" οnclick="map_setMapTypeId()">                设置</button><br />        </p>        <hr />        <p style="text-align: center;">            【缩放比例】<br />            <input type="text" id="size_zoom" /><br />            范围（0-19）<br />            <button type="button" οnclick="map_getZoom()">                获取</button>                            <button type="button" οnclick="map_setZoom()">                设置</button><br />        </p>        <hr />        <p style="text-align: center;">            【以像素为单位移动地图】<br />            x:<input type="text" id="x_panBy" /><br />            y:<input type="text" id="y_panBy" /><br />            <button type="button" οnclick="map_panBy()">                移动</button><br />        </p>        <hr />        <p style="text-align: center;">            【以经纬度为单位移动地图】<br />            纬度:<input type="text" id="lat_panTo" /><br />            经度:<input type="text" id="lng_panTo" /><br />            <button type="button" οnclick="map_panTo()">                移动</button><br />        </p>        <hr />        <p style="text-align: center;">            【鼠标左键添加,右键删除标记】<br />            标记图案:<input type="text" id="imgUrl_Marker" /><br />            不指定的话默认<br />            <button type="button" οnclick="add_delete_Marker();">                启用</button>                            <button type="button" οnclick="stop_add_delete_Marker();">                停用</button><br />        </p>        <hr />        <p style="text-align: center;">            【鼠标左键添加,右键删除标记】<br />            标记图案:<input type="text" id="Text1" /><br />            不指定的话默认<br />            <button type="button" οnclick="add_delete_Marker();">                启用</button>                            <button type="button" οnclick="stop_add_delete_Marker();">                停用</button><br />        </p>        <hr />        <p style="text-align: center;">            【鼠标画线，右键删除】<br />            <button type="button" οnclick="add_delete_Polyline();">                启用</button>                            <button type="button" οnclick="stop_add_delete_Polyline();">                停用</button><br />                长度：<span id="length_Polyline"></span>千米        </p>        <hr />        <p style="text-align: center;">            【鼠标画多边形，右键删除】<br />            <button type="button" οnclick="add_delete_Polygon();">                启用</button>                            <button type="button" οnclick="stop_add_delete_Polygon();">                停用</button><br />                面积：<span id="area_Polygon"></span>        </p>        <hr />        <p style="text-align: center;">            【鼠标画圆形，右键删除】<br />            <button type="button" οnclick="add_delete_Circle();">                启用</button>                            <button type="button" οnclick="();">                停用</button><br />                面积：<span id="Span1"></span>        </p>        <hr />    </div></body></html>