高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取

简介: 高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取

    var map = new AMap.Map('container', {
        center: [ 116.387175, 39.876405 ],
        zoom: 13
    });
    var southWest = new AMap.LngLat(116.356449, 39.859008)
    var northEast = new AMap.LngLat(116.417901, 39.893797)
    var bounds = new AMap.Bounds(southWest, northEast)
    var rectangle = new AMap.Rectangle({
        bounds: bounds,
        strokeColor:'red',
        strokeWeight: 6,
        strokeOpacity:0.5,
        strokeDasharray: [30,10],
        strokeStyle: 'dashed',
        fillColor:'blue',
        fillOpacity:0.5,
        cursor:'pointer',
        zIndex:50,
    })
    console.log(rectangle.getBounds());
    rectangle.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ rectangle ])
    var rectangleEditor = new AMap.RectangleEditor(map, rectangle)
    rectangleEditor.on('adjust', function(event) {
        log.info('触发事件:adjust')
    })
    rectangleEditor.on('end', function(event) {
        log.info('触发事件: end')
        // event.target 即为编辑后的矩形对象
    })


<div class="input-card" style="width: 120px">
    <button class="btn" onclick="rectangleEditor.open()" style="margin-bottom: 5px">开始编辑</button>
    <button class="btn" onclick="rectangleEditor.close()">结束编辑</button>
</div>


lockdatav Done!

相关文章
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
972 0
|
4月前
|
定位技术
高德地图之获取经纬度并且根据获取经纬度渲染到路线规划
高德地图之获取经纬度并且根据获取经纬度渲染到路线规划
69 0
|
6月前
|
前端开发 JavaScript 算法
程序技术好文:高德地图经纬度坐标拾取工具
程序技术好文:高德地图经纬度坐标拾取工具
160 0
|
定位技术
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
高德地图进阶开发实战案例(6):添加自定义图片覆盖物图层获取可视范围经纬度的解决方案
327 0
|
定位技术 容器
高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
144 0
|
前端开发 数据可视化 定位技术
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
438 0
百度地图开发:根据指定手绘图纸照片行政区划自定义绘制对应区域边界生成geoJOSN的解决方案
|
定位技术 API
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
612 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图弧线连接线标注
地图开发实战案例:高德地图弧线连接线标注
157 0
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
157 0
|
数据可视化 JavaScript 定位技术
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
580 0

热门文章

最新文章