利用绘制工具绘制点线面，并在执行绘制完成回调事件给相应覆盖物添加事件操作，提供标注的点击弹窗和标注、折线、多边形的右键删除

效果图如下：

完整代码如下：html+js

<!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>

    <!--加载鼠标绘制工具-->

    <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" />

    <title></title>

</head>

<body>

    <div id="allmap">

    </div>

</body>

</html>
<script type="text/javascript">

    // 百度地图初始化

    var map = new BMap.Map("allmap");

    map.centerAndZoom("上海市", 12);

    map.enableScrollWheelZoom();

    map.enableContinuousZoom();

    var bmap = {

        drawingManager: '',

        styleOptions: {

            strokeColor: "red",      //边线颜色。

            fillColor: "red",        //填充颜色。当参数为空时，圆形将没有填充效果。

            strokeWeight: 3,        //边线的宽度，以像素为单位。

            strokeOpacity: 0.8,     //边线透明度，取值范围0 - 1。

            fillOpacity: 0.3,       //填充的透明度，取值范围0 - 1。

            strokeStyle: 'solid'    //边线的样式，solid或dashed。

        },

        /*------实例化-----*/

        init: function () {

            var styleOptions = this.styleOptions;

            map.enableScrollWheelZoom();

            //实例化鼠标绘制工具

            this.drawingManager = new BMapLib.DrawingManager(map, {

                isOpen: false, //是否开启绘制模式

                enableDrawingTool: true, //是否显示工具栏

                drawingToolOptions: {

                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置

                    offset: new BMap.Size(5, 5), //偏离值

                    scale: 0.8, //工具栏缩放比例

                    drawingModes: [

                     //工具栏上可以选择出现的绘制模式

                     BMAP_DRAWING_MARKER,

                     BMAP_DRAWING_POLYGON,

                     BMAP_DRAWING_POLYLINE

                     //BMAP_DRAWING_RECTANGLE

                     //BMAP_DRAWING_CIRCLE

                    ]

                },

                polylineOptions: styleOptions, //线的样式

                polygonOptions: styleOptions, //多边形的样式

            });

            //添加鼠标绘制工具监听事件，用于获取绘制结果

            this.drawingManager.addEventListener('overlaycomplete', bmap.overlaycomplete);

        },

        overlaycomplete: function (e) {

            switch (e.drawingMode) {

                case "marker":

                    {

                        var marker = e.overlay;

                        /*-----------------标注右键删除-------------------------*/

                        var markerMenu = new BMap.ContextMenu();

                        markerMenu.addItem(new BMap.MenuItem('删除标注 ', function () {

                            map.removeOverlay(marker);

                        }))

                        marker.addContextMenu(markerMenu);

                        /*-----------------标注点击弹窗-------------------------*/

                        marker.addEventListener("click", function (e) {

                        var sContent =

                        "<form method='post' action=''>" +

                            "<table>" +

                                "<tr>" +

                                    "<td><b>名称：</b>" +

                                        "<input type='text' name='Name' style='margin-top:10px;width:200px'/>" +

                                    "</td>" +

                                "</tr>" +

                                "<tr>" +

                                    "<td><b>坐标：</b>" +

                                        "<input type='text' name='lng' value='" + e.point.lng + "' style='width:80px;'/>" +

                                        "<span>-</span>" +

                                        "<input type='text' name='lat' value='" + e.point.lat + "' style='width:80px;'/>" +

                                    "</td>" +

                                "</tr>" +

                                "<tr >" +

                                    "<td><b>备注：</b>" +

                                        "<textarea  rows=6  name='Remark' style='width:198px;vertical-align:top;'></textarea>" +

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

                        });

                    }

                    break;

                case "polyline":

                    {

                        var polyline = e.overlay;

                        /*-----------------折线右键删除-------------------------*/

                        var polylineMenu = new BMap.ContextMenu();

                        polylineMenu.addItem(new BMap.MenuItem('删除折线', function () {

                            map.removeOverlay(polyline);

                        }));

                        polyline.addContextMenu(polylineMenu);

                    }

                    break;

                case "polygon":

                    {

                        var polygon = e.overlay;

                        /*-----------------多边形右键删除-------------------------*/

                        var polygonMenu = new BMap.ContextMenu();

                        polygonMenu.addItem(new BMap.MenuItem('删除多边形', function () {

                            map.removeOverlay(polygon);

                        }));

                        polygon.addContextMenu(polygonMenu);

                    }

                    break;

            }

        }

    }

    bmap.init();

</script>

百度地图笔记_覆盖物（标注marker，折线polyline，多边形polygon）的点击弹窗和右键菜单的更多相关文章

  1. 百度地图Api之自定义标注：（获得标注的经纬度和中心经纬度即缩放度）

    百度地图Api之自定义标注:(获得标注的经纬度和中心经纬度即缩放度) <%@ Page Language="C#" AutoEventWireup="true&qu ...

  2. 百度地图API绘制带头箭头的折线

    源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  3. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  4. Android应用中使用百度地图API并加入标注（一）

    网上一些资料这样的的内容已经过时了,这里是最新的内容,假设哪里不正确,请吐槽... 1)下载百度地图移动版API(Android)开发包       要在Android应用中使用百度地图API,就须要 ...

  5. javascript百度地图添加一个普通标注点（2014-3-8 记）

    1.导入jquery.js文件:<script type="text/javascript" src="js/jquery.js"></scr ...

  6. 使用百度地图LBS创建自定义标注

    <body> <div id="allmap"></div> <div class="sel_container" i ...

  7. 百度地图api的覆盖物样式与bootstrap样式冲突解决办法

    使用百度地图api 和 bootstrap ,发现标注样式出现了问题 label左侧 宽度变得非常窄 正常情况下应该是下面这样的: 原因是boostrap样式和百度地图样式冲突了. 解决办法: .ba ...

  8. 百度地图api改变覆盖物背景实例及css颜色值简介

    在此鸣谢buptwusuopu的技术支持 在调用百度地图api的时候,为了改变覆盖物的颜色,如图中椭圆型的填充色.可以到百度api的库中查找方法http://developer.baidu.com/m ...

  9. 【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

随机推荐

  1. linux下mysql命令大全

    1.linux下启动mysql的命令: mysqladmin start /ect/init.d/mysql start (前面为mysql的安装路径) 2.linux下重启mysql的命令: mys ...

  2. obj-c的优缺点

    优点: 1) Cateogies : 类别 2) Posing : 扮演 3) 动态识别 : 编译时与运行时动态识别类型 4) 指标计算 : 指针计算 指针的 +- * / 5) 弹性信息传递 : 某 ...

  3. java基础-day4

    第04天 java基础语法 今日内容介绍 u Random u 数组 第1章   Random 1.1      产生整数随机数 1.1.1    Random的使用步骤 我们想产生1~100(包含1 ...

  4. springmvc elf8848

    刚开始觉得孔浩讲得好,之后觉得开涛讲得好,现在觉得elf8848讲得好.其实只是自己学习的各个阶段 孔浩:环境搭建,做了个基础的CRUD 开涛:讲了Controller(不该看),注解,数据绑定,请求 ...

  5. 通过FactoryBean方式来配置bean

    1.实现FactoryBean接口的java类: 2.相应的.xml文件:

  6. Eclipse代码提示功能设置

    1.        解决实例化时自动补全不必要的单词问题 2.        以MyEclipse 6.5重新配图 鉴 于网上的批评之声甚大,我只想说明我的想法:这样的增强代码提示,最终是用来辅助我们 ...

  7. C++虚函数表(vtbl)

    C++的虚函数的作用就是为了实现多态的机制,利用内存的指针偏移来实现将基类型的指针指向的内存空间用子类对象来初始化.这样经过内部虚表的运作,实现可以通过基类指针来调用子类所定义的方法. 这种技术,其实 ...

  8. C# 控件绘制

    绘制方法: 1.在控件的paint事件中绘制 2.绘制成图片,然后作为背景图或图片贴到工作区. Bitmap bmp = new Bitmap(IWidth, this.Height); Graphi ...

  9. NetCore入门篇：（十一）NetCore项目读取配置文件appsettings.json

    一.简介 1.读取配置文件是开发过程中使用非常频繁的操作.属称”不能写死“ 二.NetCore读取配置文件 1.新建一个静态公共变量,属称单例. 2.在程序Startup启动时,将系统变量传递给单例. ...

  10. wpf expender 展开动画

    非原创,网上下载的,觉得还可以,记录一下以便以后查看学习 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2 ...