码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2016-10-27 19:52:15      阅读：529      评论：0      收藏：0      [点我收藏+]

标签：back   item   enables   lib   family   笔记   view   nts   function   

给多边形区域加上标签，提供标签编辑和删除功能，效果图如下：

技术分享

 

1、添加测试数据，包括3个多边形区域，3个标注标识多边形标签的大概显示位置

技术分享 
    /*-----------------------创建3个多边形-------------------------------*/
    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);

    /*-----------------创建3个标注标识多边形标签的大概显示位置-------------*/
    var marker1 = new BMap.Marker(new BMap.Point(121.25593, 31.003114));
    var label1 = new BMap.Label("第一区域", { offset: new BMap.Size(20, -10) });
    marker1.setLabel(label1);

    var marker2 = new BMap.Marker(new BMap.Point(121.264553, 31.003671));
    var label2 = new BMap.Label("第二区域", { offset: new BMap.Size(20, -10) });
    marker2.setLabel(label2);

    var marker3 = new BMap.Marker(new BMap.Point(121.273213, 31.004105));
    var label3 = new BMap.Label("第三区域", { offset: new BMap.Size(20, -10) });
    marker3.setLabel(label3);

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

效果如下:

技术分享

2、设置label合适的偏移量offset

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

效果如下：

技术分享

3、通过设置图片偏移隐藏地图默认标注的图片

    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) // 设置图片偏移  
    });

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

效果如下：

技术分享

4、设置label标签的样式

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

效果如下：

技术分享

5、给标签添加编辑事件，用来修改区域标签名称，还有标签删除事件

原理其实就是给标注注册点击弹窗，给标注右键menu加上删除，删除标注就能删除标注的标签

(1).删除标签

 var markerMenu1 = new BMap.ContextMenu();
    markerMenu1.addItem(new BMap.MenuItem(‘删除标签‘, function () {
        map.removeOverlay(marker1);
    }));
    marker1.addContextMenu(markerMenu1);

效果如下：

技术分享技术分享

(2).修改标签名称

     marker1.addEventListener(
        "click",
        function () {
            var sContent =
                "<form method=‘post‘ action=‘‘>" +
                    "<table>" +
                        "<tr>" +
                            "<td><b>名称：</b>" +
                                "<input type=‘text‘ name=‘Name‘ style=‘margin-top:10px;width:150px‘ value=‘第一区域‘/>" +
                            "</td>" +
                        "</tr>" +                     
                        "<tr>" +
                            "<td style=‘text-align:right;‘>" +
                                "<input type=‘button‘ value=‘保存‘ style=‘width: 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();

    /*-----------------------创建3个多边形-------------------------------*/
    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);

    /*-----------------创建3个标注标识多边形标签的大概显示位置-------------*/
    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) // 设置图片偏移  
    });

    var marker1 = new BMap.Marker(new BMap.Point(121.25593, 31.003114), { icon: tagMarkerIcon });
    var label1 = new BMap.Label("第一区域", { 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("第二区域", { 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("第三区域", { 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(‘删除标签‘, function () {
        map.removeOverlay(marker1);
    }));
    marker1.addContextMenu(markerMenu1);

    //点击弹出信息  
    marker1.addEventListener(
        "click",
        function () {
            var sContent =
                "<form method=‘post‘ action=‘‘>" +
                    "<table>" +
                        "<tr>" +
                            "<td><b>名称：</b>" +
                                "<input type=‘text‘ name=‘Name‘ style=‘margin-top:10px;width:150px‘ value=‘第一区域‘/>" +
                            "</td>" +
                        "</tr>" +                     
                        "<tr>" +
                            "<td style=‘text-align:right;‘>" +
                                "<input type=‘button‘ value=‘保存‘ style=‘width: 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>
View Code

 

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

标签：back   item   enables   lib   family   笔记   view   nts   function   

原文地址：http://www.cnblogs.com/bloghxr/p/6004483.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！