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

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

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);

效果如下:

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>

时间： 2024-09-27 04:32:08

百度地图笔记_多边形覆盖物区域加标签的相关文章

百度地图上自定义图片覆盖物上加点击事件

在百度地图上加自定义图片覆盖物之后,在这个覆盖物上加点击手势,发现并不识别.原因不太清楚.不过可以通过别的方法来实现这个功能. 需要用到BMKMapViewDelegate中的方法: - (void)mapView:(BMKMapView *)mapView onClickedMapBlank:(CLLocationCoordinate2D)coordinate 然后判断所点击的坐标是否在指定区域内,在指定区域内之后,调用自己写的相应地方法即可. 百度地图上自定义图片覆盖物上加点击事件,布布扣,

百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖物的基础上的. 如何做到,我点击覆盖物弹出信息框,信息框能够持续显示实时信息,直到点击关闭? 做下笔记,包括了自定义覆盖物标识.自定义信息窗口.信息窗口显示实时信息.清除覆盖物时信息窗口的显示问题等等. 贴张效果图: 代码: <script type="text/javascript&

iOS百度地图-BMK标注&amp;覆盖物

在iOS开发中,地图算是一个比较重要的模块.我们常用的地图有高德地图,百度地图,谷歌地图,对于中国而言,苹果公司已经不再使用谷歌地图,官方使用的是高德地图.下面将讲述一下百度地图开发过程中的一些小的知识点. 对于如何配置百度地图的开发环境,在此不再讲述,具体可以参考:http://developer.baidu.com/map/index.php?title=iossdk/guide/buildproject 百度地图iOS的API下载地址:http://developer.baidu.com/

百度地图API-自定义图标覆盖物

地图覆盖物 Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法. Marker:标注表示地图上的点,可自定义标注的图标. Label:表示地图上的文本标注,您可以自定义标注的文本内容. Polyline:表示地图上的折线. Polygon:表示地图上的多边形.多边形类似于闭合的折线,另外您也可以为其添加填充颜色. Circle: 表示地图上的圆. InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息.注意:同一时刻只能有一个信息窗口在地图上打开 m

iOS百度地图笔记（环境安装）

最近有项目要使用到地图功能,先做一下调研.百度的ios开发环境需要具备两点,一秘钥二 SDK.在百度上搜索“ios百度地图api”,然后打开网页“百度地图API-首页”.在此官网上可以获取所有需要的条件. 一获取秘钥在官网上点击“申请秘钥” 点击创建应用这里需要注意几点: 1 应用类型选择 iOS SDK:2 安全码是使用百度地图SDK的APP的bundle ID. 点击提交,这样在你账号下的应用列表中就能看到百度给你分配的秘钥了.访问应用(AK)字段即为秘钥. 二获取SDK并且配置

百度地图刷新显示不完整（解析加载设置了个延迟，应该是和div顺序有关系）

解决方案:1异步加载(jquery(function(){loadJScript():})) 2解析加载设置了个延迟(setTimeOut(getInit,1000))

百度地图中拖拽地图后，多边形消失的问题

问题描述: 在手机端,在百度地图中绘制多边形区域,当拖动地图时,多边形区域会消失一部分,继续拖动,会继续再消失,拖动到原位置后,又重新现显示完全代码: var points = [{"lng":116.4935302734375,"lat":40.0506591796875},{"lng":116.4935302734375,"lat":40.05615234375},{"lng":116.4880371

百度地图api笔记

1.如何给自定义覆盖物添加点击事件我们给自定义覆盖物点击click事件.首先,需要添加一个addEventListener 的事件.如下: SquareOverlay.prototype.addEventListener = function(event,fun){ this._div['on'+event] = fun; } 再写该函数里面的参数,比如click.这样就跟百度地图API里面的覆盖物事件一样了. mySquare.addEventListener('click',functio

【百度地图API】如何给自定义覆盖物添加事件

http://www.cnblogs.com/milkmap/archive/2011/10/20/2219149.html 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应该如何添加呢?我们一起来看一看~ ----------------------------------------------------------------------------------------- 一.定义构造