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

效果图如下：

完整代码如下：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. java利用递归实现汉诺塔算法

    package 汉诺塔; //引入Scanner包,用于用户输入 import java.util.Scanner; public class 汉诺塔算法 { public static void m ...

  2. 2018.08.11 洛谷P3224 [HNOI2012]永无乡（线段树合并）

    传送门 给出n个带点权的点,支持连边和查询连通块第k大. 这个貌似就是一道线段树合并的裸板啊... 代码: #include<bits/stdc++.h> #define N 100005 ...

  3. 2018.07.08 NOIP模拟 ABCD（背包）

    ABCD 题目背景 SOURCE:NOIP2016-AHSDFZ T2 题目描述 有 4 个长度为 N 的数组 a,b,c,d .现在需要你选择 N 个数构成数组e ,数组e 满足 a[i]≤e[i] ...

  4. Deployment is out of date due to changes in the underlying project contents. Deployment is out of date due to changes in the underlying project contents. You'll need to manually 'Redeploy' the projec

    原因1:导入的jar包路径不对,造成第一个错误, 原因2:设置右键工程->属性->myeclipse->web->deployment选use workbenk defaul ...

  5. python3中 for line1 in f1.readlines():，for line1 in f1:，循环读取一个文件夹

    循环读取一个文件: fr.seek(0) fr.seek(0, 0) 概述 seek() 方法用于移动文件读取指针到指定位置. 语法 seek() 方法语法如下: fileObject.seek(of ...

  6. MFC-CWinApp

    概览 CWinApp为应用程序类, CWinApp由 CWinThread 派生而来 ,后者表示可能具有一个或多个线程的应用程序的主执行线程,基于框架生成的应用程序必须有且仅有一个从 CWinApp ...

  7. Banana

    Banana 除了有香蕉的意思外,还表示 喜剧演员

  8. BMDThread控件动态创建多线程示例

    http://www.cnblogs.com/railgunman/archive/2010/12/08/1900688.html BMDThread控件是一套相当成熟的线程控件,使用它可以让你快速的 ...

  9. Android-Android7.0-java.lang.SecurityException: MODE_WORLD_READABLE no longer supported

    某个AndroidProject项目在Android5.0系统运行是OK的,在Android7.0以上版本运行,报以下错误❌ 2019-01-02 15:33:39.996 17067-17067/? ...

  10. 启用Nginx目录浏览功能的方法

    location / {           root /data/www/file                     //指定实际目录绝对路径:           autoindex on; ...