百度地图如何通过鼠标选取获得坐标

来源：互联网发布：易名中国域名转出编辑：程序博客网时间：2024/06/10 11:25

首先也去百度地图申请下密钥 ####密钥删除写成自己的即可用

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">#allmap {width: 800px;height: 500px}/*body, html,#allmap {width: 800px;height: 500px;overflow: hidden;margin:0;font-family:"微软雅黑";}*/#result{width:200px;height:50px;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=#########密钥"></script><!--加载鼠标绘制工具--><script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script><link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /><title>地图展示</title></head><body><!--<div id="allmap"></div>--><div id="allmap" style="overflow:hidden;zoom:1;position:relative;">            <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>    </div>    <div id="result">    <button onclick="tan()">弹窗</button>        <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/>        <input type="button" value="清除所有覆盖物" onclick="clearAll()"/>    </div></body></html><script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");    // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别map.addControl(new BMap.MapTypeControl());   //添加地图类型控件map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放 //鼠标绘制完成回调方法   获取各个点的经纬度    var overlays = [];    var overlaycomplete = function(e){        overlays.push(e.overlay);        var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组        for(var i=0;i<path.length;i++){            console.log("lng:"+path[i].lng+"\n lat:"+path[i].lat);        }    };          var styleOptions = {        strokeColor:"red",    //边线颜色。        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。        strokeWeight: 3,       //边线的宽度，以像素为单位。        strokeOpacity: 0.8,       //边线透明度，取值范围0 - 1。        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。        strokeStyle: 'solid' //边线的样式，solid或dashed。    }    //实例化鼠标绘制工具    var drawingManager = new BMapLib.DrawingManager(map, {        isOpen: false, //是否开启绘制模式        enableDrawingTool: true, //是否显示工具栏        drawingMode:BMAP_DRAWING_POLYGON,//绘制模式  多边形        drawingToolOptions: {            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置            offset: new BMap.Size(5, 5), //偏离值            drawingModes:[                BMAP_DRAWING_RECTANGLE            ]        },        polygonOptions: styleOptions //多边形的样式    });         //添加鼠标绘制工具监听事件，用于获取绘制结果    drawingManager.addEventListener('overlaycomplete', overlaycomplete);    function clearAll() {        for(var i = 0; i < overlays.length; i++){            map.removeOverlay(overlays[i]);        }        overlays.length = 0       }</script>

参考资料 http://www.cnblogs.com/fozero/p/5912287.html

页面效果

阅读全文

0 0