当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>HDHCMS使用百度地图获取经纬度工具

HDHCMS使用百度地图获取经纬度工具

时间:2020/8/29 10:30:00 【admin】

HDHCMS使用百度地图获取经纬度工具…

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>HDHCMS使用百度地图获取经纬度工具</title>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

</head>

<body>

<div style="width:90%;height:600px;border:1px solid gray" id="container"></div>

<p><input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" /><input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>

<div id="info"></div>

</body>

</html>

<script type="text/javascript">

var map = new BMap.Map("container");                        // 创建Map实例

map.centerAndZoom("东莞", 15);     // 初始化地图,设置中心点坐标和地图级别


var key = 1;    //开关

var newpoint;   //一个经纬度

var points = [];    //数组,放经纬度信息

var polyline = new BMap.Polyline(); //折线覆盖物


function startTool(){   //开关函数

if(key==1){

        document.getElementById("startBtn").style.background = "green";

        document.getElementById("startBtn").style.color = "white";

        document.getElementById("startBtn").value = "开启状态";

        key=0;

    }

    else{

        document.getElementById("startBtn").style.background = "red";

        document.getElementById("startBtn").value = "关闭状态";

        key=1;

    }

}

map.addEventListener("click",function(e){   //单击地图,形成折线覆盖物

    newpoint = new BMap.Point(e.point.lng,e.point.lat);

    if(key==0){

    //    if(points[points.length].lng==points[points.length-1].lng){alert(111);}

        points.push(newpoint);  //将新增的点放到数组中

        polyline.setPath(points);   //设置折线的点数组

        map.addOverlay(polyline);   //将折线添加到地图上

        document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>";    //输出数组里的经纬度

    }

});

map.addEventListener("dblclick",function(e){   //双击地图,形成多边形覆盖物

if(key==0){

        map.disableDoubleClickZoom();   //关闭双击放大

var polygon = new BMap.Polygon(points);

        map.addOverlay(polygon);   //将折线添加到地图上

    }

});

</script>


CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮