當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

百度地图笔记_多边形覆盖物区域加标签

發(fā)布時(shí)間：2023/12/15 综合教程 24 生活家

生活随笔收集整理的這篇文章主要介紹了百度地图笔记_多边形覆盖物区域加标签小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

給多邊形區(qū)域加上標(biāo)簽，提供標(biāo)簽編輯和刪除功能，效果圖如下：

1、添加測(cè)試數(shù)據(jù)，包括3個(gè)多邊形區(qū)域，3個(gè)標(biāo)注標(biāo)識(shí)多邊形標(biāo)簽的大概顯示位置

<!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">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微軟雅黑";
            font-size: 14px;
        }
    </style>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=31hnqKEhOUOWFXXxvWYXiM1v"></script>
    <title></title>
</head>
<body>
    <div id="allmap">
    </div>
</body>
</html>
<script type="text/javascript">
    // 百度地圖初始化
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(121.26105, 31.003331), 16);
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();

    /*-----------------------創(chuàng)建3個(gè)多邊形-------------------------------*/
    var polygon1 = new BMap.Polygon([
        new BMap.Point(121.25266, 31.004538),
        new BMap.Point(121.252696, 31.000576),
        new BMap.Point(121.259774, 31.001133),
        new BMap.Point(121.258948, 31.004848)
    ], { strokeColor: getRandomColor(), strokeWeight: 3, strokeOpacity: 0.5, fillOpacity: 0.1 });
    map.addOverlay(polygon1);

    var polygon2 = new BMap.Polygon([
        new BMap.Point(121.261966, 31.004909),
        new BMap.Point(121.262218, 31.001566),
        new BMap.Point(121.267212, 31.002),
        new BMap.Point(121.266817, 31.005498)
    ], { strokeColor: getRandomColor(), strokeWeight: 3, strokeOpacity: 0.5, fillOpacity: 0.1 });
    map.addOverlay(polygon2);

    var polygon3 = new BMap.Polygon([
        new BMap.Point(121.268614, 31.005528),
        new BMap.Point(121.268865, 31.002186),
        new BMap.Point(121.277022, 31.002309),
        new BMap.Point(121.27695, 31.00624)
    ], { strokeColor: getRandomColor(), strokeWeight: 3, strokeOpacity: 0.5, fillOpacity: 0.1 });
    map.addOverlay(polygon3);

    /*-----------------創(chuàng)建3個(gè)標(biāo)注標(biāo)識(shí)多邊形標(biāo)簽的大概顯示位置-------------*/
    var tagMarkerIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
        imageOffset: new BMap.Size(0, 0 - 13 * 25) // 設(shè)置圖片偏移  
    });

    var marker1 = new BMap.Marker(new BMap.Point(121.25593, 31.003114), { icon: tagMarkerIcon });
    var label1 = new BMap.Label("第一區(qū)域", { offset: new BMap.Size(-15, 2) });
    marker1.setLabel(label1);

    var marker2 = new BMap.Marker(new BMap.Point(121.264553, 31.003671), { icon: tagMarkerIcon });
    var label2 = new BMap.Label("第二區(qū)域", { offset: new BMap.Size(-15, 2) });
    marker2.setLabel(label2);

    var marker3 = new BMap.Marker(new BMap.Point(121.273213, 31.004105), { icon: tagMarkerIcon });
    var label3 = new BMap.Label("第三區(qū)域", { offset: new BMap.Size(-15, 2) });
    marker3.setLabel(label3);

    label1.setStyle({
        color: "red",
        fontSize: "9px",
        backgroundColor: "0.05",
        border: "0",
        fontWeight: "bold"
    });
    label2.setStyle({
        color: "red",
        fontSize: "9px",
        backgroundColor: "0.05",
        border: "0",
        fontWeight: "bold"
    });
    label3.setStyle({
        color: "red",
        fontSize: "9px",
        backgroundColor: "0.05",
        border: "0",
        fontWeight: "bold"
    });
    marker1.setLabel(label1);
    marker2.setLabel(label2);
    marker3.setLabel(label3);

    var markerMenu1 = new BMap.ContextMenu();
    markerMenu1.addItem(new BMap.MenuItem('刪除標(biāo)簽', function () {
        map.removeOverlay(marker1);
    }));
    marker1.addContextMenu(markerMenu1);

    //點(diǎn)擊彈出信息  
    marker1.addEventListener(
        "click",
        function () {
            var sContent =
                "<form method='post' action=''>" +
                    "<table>" +
                        "<tr>" +
                            "<td><b>名稱(chēng)：</b>" +
                                "<input type='text' name='Name' style='margin-top:10px;150px' value='第一區(qū)域'/>" +
                            "</td>" +
                        "</tr>" +                     
                        "<tr>" +
                            "<td style='text-align:right;'>" +
                                "<input type='button' value='保存' style=' 40px;line-height: 40px;'/>" +
                            "</td>" +
                        "</tr>" +
                    "</talbe>" +
                "</form>";
            var opts = {
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(sContent, opts);
            this.openInfoWindow(infoWindow);
        });

    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);

    function getRandomColor() {
        return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
    }

    //map.addEventListener("click", function (e) {
    //    $("#show>ul").append("<li>" + e.point.lng + "," + e.point.lat + "</li>");
    //})

</script>

效果如下:

2、設(shè)置label合適的偏移量offset

var label1 = new BMap.Label("第一區(qū)域", { offset: new BMap.Size(-15, 2) });

效果如下：

3、通過(guò)設(shè)置圖片偏移隱藏地圖默認(rèn)標(biāo)注的圖片

    var tagMarkerIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
        imageOffset: new BMap.Size(0, 0 - 13 * 25) // 設(shè)置圖片偏移  
    });

    var marker1 = new BMap.Marker(new BMap.Point(121.25593, 31.003114), { icon: tagMarkerIcon });

效果如下：

4、設(shè)置label標(biāo)簽的樣式

    label1.setStyle({
        color: "red",
        fontSize: "9px",
        backgroundColor: "0.05",
        border: "0",
        fontWeight: "bold"
    });
   marker1.setLabel(label1);

效果如下：

5、給標(biāo)簽添加編輯事件，用來(lái)修改區(qū)域標(biāo)簽名稱(chēng)，還有標(biāo)簽刪除事件

原理其實(shí)就是給標(biāo)注注冊(cè)點(diǎn)擊彈窗，給標(biāo)注右鍵menu加上刪除，刪除標(biāo)注就能刪除標(biāo)注的標(biāo)簽

(1).刪除標(biāo)簽

 var markerMenu1 = new BMap.ContextMenu();
    markerMenu1.addItem(new BMap.MenuItem('刪除標(biāo)簽', function () {
        map.removeOverlay(marker1);
    }));
    marker1.addContextMenu(markerMenu1);

效果如下：

(2).修改標(biāo)簽名稱(chēng)

marker1.addEventListener(
        "click",
        function () {
            var sContent =
                "<form method='post' action=''>" +
                    "<table>" +
                        "<tr>" +
                            "<td><b>名稱(chēng)：</b>" +
                                "<input type='text' name='Name' style='margin-top:10px;150px' value='第一區(qū)域'/>" +
                            "</td>" +
                        "</tr>" +                     
                        "<tr>" +
                            "<td style='text-align:right;'>" +
                                "<input type='button' value='保存' style=' 40px;line-height: 40px;'/>" +
                            "</td>" +
                        "</tr>" +
                    "</talbe>" +
                "</form>";
            var opts = {
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(sContent, opts);
            this.openInfoWindow(infoWindow);
        });

效果如下:

附上完整代碼：

<!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">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微軟雅黑";
            font-size: 14px;
        }
    </style>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=31hnqKEhOUOWFXXxvWYXiM1v"></script>
    <title></title>
</head>
<body>
    <div id="allmap">
    </div>
</body>
</html>
<script type="text/javascript">
    // 百度地圖初始化
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(121.26105, 31.003331), 16);
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();

    /*-----------------------創(chuàng)建3個(gè)多邊形-------------------------------*/
    var polygon1 = new BMap.Polygon([
        new BMap.Point(121.25266, 31.004538),
        new BMap.Point(121.252696, 31.000576),
        new BMap.Point(121.259774, 31.001133),
        new BMap.Point(121.258948, 31.004848)
    ], { strokeColor: getRandomColor(), strokeWeight: 3, strokeOpacity: 0.5, fillOpacity: 0.1 });
    map.addOverlay(polygon1);

    var polygon2 = new BMap.Polygon([
        new BMap.Point(121.261966, 31.004909),
        new BMap.Point(121.262218, 31.001566),
        new BMap.Point(121.267212, 31.002),
        new BMap.Point(121.266817, 31.005498)
    ], { strokeColor: getRandomColor(), strokeWeight: 3, strokeOpacity: 0.5, fillOpacity: 0.1 });
    map.addOverlay(polygon2);

    var polygon3 = new BMap.Polygon([
        new BMap.Point(121.268614, 31.005528),
        new BMap.Point(121.268865, 31.002186),
        new BMap.Point(121.277022, 31.002309),
        new BMap.Point(121.27695, 31.00624)
    ], { strokeColor: getRandomColor(), strokeWeight: 3, strokeOpacity: 0.5, fillOpacity: 0.1 });
    map.addOverlay(polygon3);

    /*-----------------創(chuàng)建3個(gè)標(biāo)注標(biāo)識(shí)多邊形標(biāo)簽的大概顯示位置-------------*/
    var tagMarkerIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
        imageOffset: new BMap.Size(0, 0 - 13 * 25) // 設(shè)置圖片偏移  
    });

    var marker1 = new BMap.Marker(new BMap.Point(121.25593, 31.003114), { icon: tagMarkerIcon });
    var label1 = new BMap.Label("第一區(qū)域", { offset: new BMap.Size(-15, 2) });
    marker1.setLabel(label1);

    var marker2 = new BMap.Marker(new BMap.Point(121.264553, 31.003671), { icon: tagMarkerIcon });
    var label2 = new BMap.Label("第二區(qū)域", { offset: new BMap.Size(-15, 2) });
    marker2.setLabel(label2);

    var marker3 = new BMap.Marker(new BMap.Point(121.273213, 31.004105), { icon: tagMarkerIcon });
    var label3 = new BMap.Label("第三區(qū)域", { offset: new BMap.Size(-15, 2) });
    marker3.setLabel(label3);

    label1.setStyle({
        color: "red",
        fontSize: "9px",
        backgroundColor: "0.05",
        border: "0",
        fontWeight: "bold"
    });
    label2.setStyle({
        color: "red",
        fontSize: "9px",
        backgroundColor: "0.05",
        border: "0",
        fontWeight: "bold"
    });
    label3.setStyle({
        color: "red",
        fontSize: "9px",
        backgroundColor: "0.05",
        border: "0",
        fontWeight: "bold"
    });
    marker1.setLabel(label1);
    marker2.setLabel(label2);
    marker3.setLabel(label3);

    var markerMenu1 = new BMap.ContextMenu();
    markerMenu1.addItem(new BMap.MenuItem('刪除標(biāo)簽', function () {
        map.removeOverlay(marker1);
    }));
    marker1.addContextMenu(markerMenu1);

    //點(diǎn)擊彈出信息  
    marker1.addEventListener(
        "click",
        function () {
            var sContent =
                "<form method='post' action=''>" +
                    "<table>" +
                        "<tr>" +
                            "<td><b>名稱(chēng)：</b>" +
                                "<input type='text' name='Name' style='margin-top:10px;150px' value='第一區(qū)域'/>" +
                            "</td>" +
                        "</tr>" +                     
                        "<tr>" +
                            "<td style='text-align:right;'>" +
                                "<input type='button' value='保存' style=' 40px;line-height: 40px;'/>" +
                            "</td>" +
                        "</tr>" +
                    "</talbe>" +
                "</form>";
            var opts = {
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(sContent, opts);
            this.openInfoWindow(infoWindow);
        });

    map.addOverlay(marker1);
    map.addOverlay(marker2);
    map.addOverlay(marker3);

    function getRandomColor() {
        return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
    }

    //map.addEventListener("click", function (e) {
    //    $("#show>ul").append("<li>" + e.point.lng + "," + e.point.lat + "</li>");
    //})

</script>

總結(jié)

以上是生活随笔為你收集整理的百度地图笔记_多边形覆盖物区域加标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： tcp假连接_总结的23 个 TCP高频
下一篇： Linux系统不能启动怎么办