一，实现功能：

在地图上标记点，划线等操作。如下图。

2.代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.     <style type="text/css">
  7.         body, html, #allmap {
  8.             width: 100%;
  9.             height: 100%;
  10.             overflow: hidden;
  11.             margin: 0;
  12.             font-family: "微软雅黑";
  13.             font-size: 14px;
  14.         }
  15.     </style>
  16.     <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  17.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=31hnqKEhOUOWFXXxvWYXiM1v"></script>
  18.     <!--加载鼠标绘制工具-->
  19.     <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
  20.     <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
  21.     <title></title>
  22. </head>
  23. <body>
  24. <div id="allmap">
  25. </div>
  26. </body>
  27. </html>
  28.  
  29. <script type="text/javascript">
  30.     // 百度地图初始化
  31.     var map = new BMap.Map("allmap");
  32.     map.centerAndZoom("上海市", 12);
  33.     map.enableScrollWheelZoom();
  34.     map.enableContinuousZoom();
  35.  
  36.     var bmap = {
  37.         drawingManager: '',
  38.         styleOptions: {
  39.             strokeColor: "red",      //边线颜色。
  40.             fillColor: "red",        //填充颜色。当参数为空时，圆形将没有填充效果。
  41.             strokeWeight: 3,        //边线的宽度，以像素为单位。
  42.             strokeOpacity: 0.8,     //边线透明度，取值范围0 - 1。
  43.             fillOpacity: 0.3,       //填充的透明度，取值范围0 - 1。
  44.             strokeStyle: 'solid'    //边线的样式，solid或dashed。
  45.         },
  46.  
  47.         /*------实例化-----*/
  48.         init: function () {
  49.             var styleOptions = this.styleOptions;
  50.             map.enableScrollWheelZoom();
  51.             //实例化鼠标绘制工具
  52.             this.drawingManager = new BMapLib.DrawingManager(map, {
  53.                 isOpen: false, //是否开启绘制模式
  54.                 enableDrawingTool: true, //是否显示工具栏
  55.                 drawingToolOptions: {
  56.                     anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
  57.                     offset: new BMap.Size(5, 5), //偏离值
  58.                     scale: 0.8, //工具栏缩放比例
  59.                     drawingModes: [
  60.                         //工具栏上可以选择出现的绘制模式
  61.                         BMAP_DRAWING_MARKER,
  62.                         BMAP_DRAWING_POLYGON,
  63.                         BMAP_DRAWING_POLYLINE
  64.                         //BMAP_DRAWING_RECTANGLE
  65.                         //BMAP_DRAWING_CIRCLE
  66.                     ]
  67.                 },
  68.                 polylineOptions: styleOptions, //线的样式
  69.                 polygonOptions: styleOptions, //多边形的样式
  70.             });
  71.             //添加鼠标绘制工具监听事件，用于获取绘制结果
  72.             this.drawingManager.addEventListener('overlaycomplete', bmap.overlaycomplete);
  73.         },
  74.         overlaycomplete: function (e) {
  75.             switch (e.drawingMode) {
  76.                 case "marker":
  77.                 {
  78.                     var marker = e.overlay;
  79.                     /*-----------------标注右键删除-------------------------*/
  80.                     var markerMenu = new BMap.ContextMenu();
  81.                     markerMenu.addItem(new BMap.MenuItem('删除标注 ', function () {
  82.                         map.removeOverlay(marker);
  83.                     }))
  84.                     marker.addContextMenu(markerMenu);
  85.                     /*-----------------标注点击弹窗-------------------------*/
  86.                     marker.addEventListener("click", function (e) {
  87.                         var sContent =
  88.                                 "<form method='post' action=''>" +
  89.                                 "<table>" +
  90.                                 "<tr>" +
  91.                                 "<td><b>名称：</b>" +
  92.                                 "<input type='text' name='Name' style='margin-top:10px;width:200px'/>" +
  93.                                 "</td>" +
  94.                                 "</tr>" +
  95.                                 "<tr>" +
  96.                                 "<td><b>坐标：</b>" +
  97.                                 "<input type='text' name='lng' value='" + e.point.lng + "' style='width:80px;'/>" +
  98.                                 "<span>-</span>" +
  99.                                 "<input type='text' name='lat' value='" + e.point.lat + "' style='width:80px;'/>" +
  100.                                 "</td>" +
  101.                                 "</tr>" +
  102.                                 "<tr >" +
  103.                                 "<td><b>备注：</b>" +
  104.                                 "<textarea  rows=6  name='Remark' style='width:198px;vertical-align:top;'></textarea>" +
  105.                                 "</td>" +
  106.                                 "</tr>" +
  107.                                 "<tr>" +
  108.                                 "<td style='text-align:right;'>" +
  109.                                 "<input type='button' value='保存' style='width: 40px;line-height: 40px;'/>" +
  110.                                 "</td>" +
  111.                                 "</tr>" +
  112.                                 "</talbe>" +
  113.                                 "</form>";
  114.                         var opts = {
  115.                             enableMessage: false
  116.                         };
  117.                         var infoWindow = new BMap.InfoWindow(sContent, opts);
  118.                         this.openInfoWindow(infoWindow);
  119.                     });
  120.                 }
  121.                     break;
  122.                 case "polyline":
  123.                 {
  124.                     var polyline = e.overlay;
  125.                     /*-----------------折线右键删除-------------------------*/
  126.                     var polylineMenu = new BMap.ContextMenu();
  127.                     polylineMenu.addItem(new BMap.MenuItem('删除折线', function () {
  128.                         map.removeOverlay(polyline);
  129.                     }));
  130.                     polyline.addContextMenu(polylineMenu);
  131.                 }
  132.                     break;
  133.                 case "polygon":
  134.                 {
  135.                     var polygon = e.overlay;
  136.                     /*-----------------多边形右键删除-------------------------*/
  137.                     var polygonMenu = new BMap.ContextMenu();
  138.                     polygonMenu.addItem(new BMap.MenuItem('删除多边形', function () {
  139.                         map.removeOverlay(polygon);
  140.                     }));
  141.                     polygon.addContextMenu(polygonMenu);
  142.                 }
  143.                     break;
  144.             }
  145.         }
  146.     }
  147.     bmap.init();
  148. </script>

3.原文地址：

https://www.cnblogs.com/bloghxr/p/6003660.html

百度地图开发者API学习笔记一(转载)的更多相关文章

  1. 百度地图开发者API学习笔记二

    一,地图上多个覆盖物(Marker). 当有多个覆盖物时,我们需要获取每个点的信息.如下图,每个Marker的经度都不相同 二,代码: <!DOCTYPE html> <html&g ...

  2. 【转载】ASP.NET MVC Web API 学习笔记---第一个Web API程序

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  3. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  4. WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现

    原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...

  5. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  6. TCP协议和socket API 学习笔记

    本文转载至 http://blog.chinaunix.net/uid-16979052-id-3350958.html 分类:  原文地址:TCP协议和socket API 学习笔记 作者:gilb ...

  7. 如何结合自己本地数据库，使用【百度地图】API

    如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...

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

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

  9. 百度地图代码API

    百度地图代码API: http://api.map.baidu.com/lbsapi/creatmap/index.html

随机推荐

  1. February 18th, 2018 Week 8th Sunday

    Don't cry for what is lost. Smile for what still remains. 别为失去的哭泣,为还留在你身边的一切微笑吧. I have been told th ...

  2. MATLAB一元线性回归分析

    MATLAB一元线性回归分析应用举例 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ huigui.m function [b,bint,r,rint, ...

  3. Vue编写的todolist小例子

    Vue编写的todolist小例子 本篇博客主要包含一个内容: 1.第一个内容:使用Vue编写todolist例子,包含的主要知识是v-model,v-for,el表达式,以及Vue中使用method ...

  4. eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP（一）

    eclipse使用CXF3.1.*创建webservice服务端客户端以及客户端手机APP(一) 本篇博客主要包含五个内容: 1.CXF换将搭建以及eclipse配置CXF. 2.eclipse创建w ...

  5. Eclipse使用过程中的经验总结

    1.Eclipse中如何配置JDK的Documents和Sources? "Windows"-> "Preferences"-> "Jav ...

  6. gRPC奇怪的编译命令protoc

    举个栗子: protoc -I helloworld/ helloworld/helloworld.proto --go_out=plugins=grpc:helloworld 大神说得没错,读文档就 ...

  7. ES5-ES6-ES7_字符串扩展—模板字符串

    includes(), startsWith(), endsWith() 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法 ...

  8. Jenkins+Ansible+Gitlab自动化部署三剑客-Jenkins本地搭建

    后面需要shell基础,目前没有,等有了,再更

  9. idea在maven打包时运行Test测试, 导致打包失败, 乱七八糟的错误

    在maven打包时运行Test测试, 导致打包失败, 乱七八糟的错误 在maven projects中图标toggle'skip Tests' Mode //宏杰帮助 网上案例:https://blo ...

  10. 转载 1-EasyNetQ介绍（黄亮翻译） https://www.cnblogs.com/HuangLiang/p/7105659.html

    EasyNetQ 是一个容易使用,坚固的,针对RabbitMQ的 .NET API. 假如你尽可能快的想去安装和运行RabbitMQ,请去看入门指南.EasyNetQ是为了提供一个尽可能简洁的适用与R ...