百度Map-JSAPI-覆蓋物范圍查詢標記

本文轉載自查看原文 2019-03-09 14:51 610 JavaScript/ ProjectAnalysisBusiness

1、單點標記並添加說明信息

2、可視化區域范圍

3、矩形覆蓋物經緯度范圍

說明：該項目為javaweb項目，標記點信息為數據庫中存儲信息】

參考API鏈接

http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html

http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a3b0

結果圖

index.html

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BusinessAnalyseMap</title>
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
    .selectArea {
        width: 45%;
        margin: auto;
        text-align: center;
    }

    .container {
        position: relative;
        margin: 0 auto;
        height: 800px;
        width: 1200px;
        border: 1px solid gray;
        overflow: hidden;

    }

    .resultShape {
        position: relative;
        margin: 0 auto;
        width: 400px;
        border: 1px solid cornflowerblue;
        overflow: hidden;
    }

</style>
<body style="background:#CBE1FF"><br>
<div id="select" class="selectArea">省:&nbsp;<input id="province" type="text" value="陝西">&nbsp;&nbsp;市:&nbsp;<input
        id="city" type="text" value="西安">&nbsp;&nbsp;區:&nbsp;<input
        id="area" type="text" value="西安理工大學">
    <br>
    <button id="bt1" onclick="mark()">單點查詢</button>
    &nbsp;&nbsp;&nbsp;<button id="bt2">可視區域查詢</button><!-- onclick="markArea()"-->
    <!--<br>-->
    &nbsp;&nbsp;&nbsp;<button id="bt3">畫矩形</button>
    &nbsp;&nbsp;&nbsp;<button id="bt4">畫圓</button>
    &nbsp;&nbsp;&nbsp;<button id="bt5">覆蓋物頂點查詢</button>
    &nbsp;&nbsp;&nbsp;<button id="bt6">清除覆蓋物</button>
    <br><br>
</div>
<div id="container" class="container"></div>
<div id="resultShape" class="resultShape"></div>

</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wWy2A8K94nhntYTYUHS19RXW"></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"/>
<!--加載檢索信息窗口-->
<script type="text/javascript"
        src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css"/>
<script type="text/javascript">
    var map = new BMap.Map('container');//生成地圖
    var point = new BMap.Point(108.99985408207484, 34.259565274324369);
    map.centerAndZoom(point, 12);
    map.enableScrollWheelZoom();    //啟用滾輪放大縮小，默認禁用
    map.enableContinuousZoom();    //啟用地圖慣性拖拽，默認禁用
    map.addControl(new BMap.NavigationControl(true));  //添加默認縮放平移控件
    map.addControl(new BMap.OverviewMapControl(true)); //添加默認縮略地圖控件
    map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角，打開
    var scaleCtrl = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(10, 40)}); //比例尺
    map.addControl(scaleCtrl);
</script>
<script type="text/javascript" src="js/mark.js"></script> //單點標記js代碼
<script type="text/javascript" src="js/AreaMark.js"></script>  //可視化區域標記js代碼
<script type="text/javascript" src="js/OverlayMark.js"></script>  //覆蓋物標記代碼
</html>

1、單點地址標記並添加說明信息（函數 mark() ）

js代碼

function mark() {
    var province = $("#province").val();
    var city = $("#city").val();
    var area = $("#area").val();
    $.ajax({
        type: "POST",
        url: "servlet/MarkServlet",
        data: {
            "address": area,
            "city": city
        },
        dataType: "json",
        success: function (data) {
            if (data != null) {
                if (data === 'failure') {
                    alert("定位失敗")
                } else {
                    // alert(data);
                    map.clearOverlays(); //清空標注
                    markPoint(data);
                }
            }
        }
    })
}

//mark的回調函數
function markPoint(data) {
    var content = "<div style=\"margin:0;line-height:20px;padding:2px;width:450px;height:120px\">" +
        "<img style='float:right;margin:4px' id='imgDemo' src='" + data.img + "' width='139' height='104' title='" + data.name + "'/>" +
        "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + data.name + "</h4>" +
        "<p style='margin:0;line-height:1.5;font-size:13px;'>" + "地址：" + data.city + "市" + data.address +
        "<br>tel：" + data.tel + "<br>評分：" + data.grade + "</p>" + "</div>";
    var lng = data.lng;
    var lat = data.lat;
    var point = new BMap.Point(lng, lat);
    var marker = new BMap.Marker(point);
    var infoWindow = new BMap.InfoWindow(content);  //信息窗口對象
    map.addOverlay(marker);
    map.centerAndZoom(point, 15);
    //api方法
    marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
        //圖片加載完畢重繪infowindow
        document.getElementById('imgDemo').onload = function () {
            infoWindow.redraw();   //防止在網速較慢，圖片未加載時，生成的信息框高度比圖片的總高度小，導致圖片部分被隱藏
        }
    })
}

content變量為信息窗口的html樣式

var infoWindow = new BMap.InfoWindow(content); //信息窗口對象

BMap.InfoWindow(content)：百度地圖提供函數，建立窗口信息對象，參數為string/html

var point = new BMap.Point(lng, lat); 建立point對象

var marker = new BMap.Marker(point); 將point對象設置為標記點

map.addOverlay(marker); 在地圖上添加標記點

map.centerAndZoom(point, 15); 設置地圖中心和比例尺

2、可視化區域范圍查詢標記

主要函數 getBorder() 百度API函數

//取得上下左右邊界值
function getBorder() {
    var bounds = map.getBounds(); //獲取區域
    var sw = bounds.getSouthWest();  //西南
    var ne = bounds.getNorthEast();  //東北
    bottom = sw.lat; //下屆
    top_ = ne.lat;  //上界
    left = sw.lng;  //左
    right = ne.lng; //右
    var info = {
        "bottom": bottom,
        "top": top_,
        "left": left,
        "right": right
    }
}

示意圖

getBorder的返回值包含矩形可視框的西南角和東北角坐標

思路：使用西南和東北角坐標獲取可視區域經緯度范圍

3、覆蓋物經緯度范圍

結果

js代碼（DrawingManager查看文章開頭鏈接）（可粘貼與index.heml直接使用）

$(document).ready(function () {
    $("#bt3").click(function () {
        draw(BMAP_DRAWING_RECTANGLE)
    });
    $("#bt4").click(function () {
        draw(BMAP_DRAWING_CIRCLE)
    });
    $("#bt5").click(function () {
        getPoint()
    });
    $("#bt6").click(function () {
        clearAll()
    });
});


var overlays = []
var overlaycomplete = function (e) {
    overlays.push(e.overlay);
};

var styleOptions = {
    strokeColor: "red",    //邊線顏色。
    fillColor: "blue",      //填充顏色。
    strokeWeight: 3,       //邊線的寬度，以像素為單位。
    strokeOpacity: 0.5,    //邊線透明度，取值范圍0 - 1。
    fillOpacity: 0.1,      //填充的透明度，取值范圍0 - 1。
    strokeStyle: 'solid' //邊線的樣式，solid或dashed。
};

//實例化鼠標繪制工具
var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false, //是否開啟繪制模式
    circleOptions: styleOptions, //圓的樣式
    polylineOptions: styleOptions, //線的樣式
    polygonOptions: styleOptions, //多邊形的樣式
    rectangleOptions: styleOptions //矩形的樣式
});

//添加鼠標繪制工具監聽事件，用於獲取繪制結果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);

function draw(type) {
    drawingManager.open();
    drawingManager.setDrawingMode(type);
}

function clearAll() {
    for (var i = 0; i < overlays.length; i++) {
        map.removeOverlay(overlays[i]);
    }
    overlays.length = 0
}


function getPoint() {
    function $(id) {
        return document.getElementById(id);
    }

    $("resultShape").innerHTML = '';
    for (var i = 0; i < overlays.length; i++) {
        var overlay = overlays[i].getPath();
        $("resultShape").innerHTML = $("resultShape").innerHTML + overlay.length + '邊形:<br/>';
        for (var j = 0; j < overlay.length; j++) {
            var grid = overlay[j];
            $("resultShape").innerHTML = $("resultShape").innerHTML + (j + 1) + "個點:(" + grid.lng + "," + grid.lat + ");<br/>";
        }
    }
}

getPoint()函數獲取覆蓋物overlay的所有頂點坐標

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 百度地圖添加覆蓋物百度地圖——覆蓋物在多條軌跡上循環移動百度地圖API-覆蓋物百度地圖-覆蓋物的簡單使用百度地圖清除所有覆蓋物的方法百度地圖設置標注點在覆蓋物上面百度地圖api-動態添加覆蓋物百度地圖實現復雜覆蓋物(Overlay)比如：Echarts 百度地圖刪除指定標注(或其他覆蓋物) Android百度地圖開發（二）地圖覆蓋物