获取经纬度for微信小程序 - 追着光梦游

获取经纬度for微信小程序

ACM解题报告 2018-05-08

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>行政区域工具</title>
<script type="text/javascript" src="http://map.qq.com/api/js?v=2.exp"></script>
</head>
<body>
<div style="width:520px;height:340px;border:1px solid gray" id="container"></div>
<p><input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" /><input type="button" onclick="document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>
<div id="info"></div>
</body>
</html>
<script type="text/javascript">
var map = new qq.maps.Map("container");                        // 创建Map实例
//map.centerAndZoom("北京", 11);     // 初始化地图,设置中心点坐标和地图级别

var key = 1;    //开关
var newpoint;   //一个经纬度
var points = [];    //数组,放经纬度信息
var polyline = new qq.maps.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;
    }
}
qq.maps.event.addListener(map,'click',function(e){   //单击地图,形成折线覆盖物
    newpoint = new qq.maps.Point(e.latLng.getLng(),e.latLng.getLat());
    if(key==0){
    //    if(points[points.length].lng==points[points.length-1].lng){alert(111);}
        points.push(newpoint);  //将新增的点放到数组中
        polyline.setPath(points);   //设置折线的点数组
        //map.addOverlay(polyline);   //将折线添加到地图上
           // polyline.setMap(polyline);
        document.getElementById("info").innerHTML += "{longitude:" + e.latLng.getLng() + ",latitude:" + e.latLng.getLat()+ "},</br>";    //输出数组里的经纬度
    }
});
qq.maps.event.addListener(map,"dblclick",function(e){   //双击地图,形成多边形覆盖物
if(key==0){
        map.disableDoubleClickZoom();   //关闭双击放大
var polygon = new qq.maps.Polygon(points);
        //map.addOverlay(polygon);   //将折线添加到地图上
    }
});
</script>

本文由 guopengli 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。
  • 浏览次数: 170
  • 还不快抢沙发

    添加新评论