百度地图开发者API学习笔记一(转载)
一，实现功能：
在地图上标记点，划线等操作。如下图。
2.代码：
<!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>
3.原文地址：
https://www.cnblogs.com/bloghxr/p/6003660.html
百度地图开发者API学习笔记一(转载)的更多相关文章
- 百度地图开发者API学习笔记二
一,地图上多个覆盖物(Marker). 当有多个覆盖物时,我们需要获取每个点的信息.如下图,每个Marker的经度都不相同 二,代码: <!DOCTYPE html> <html&g ...
- 【转载】ASP.NET MVC Web API 学习笔记---第一个Web API程序
1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
- WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现
原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...
- 百度地图JavaScript API使用
最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...
- TCP协议和socket API 学习笔记
本文转载至 http://blog.chinaunix.net/uid-16979052-id-3350958.html 分类: 原文地址:TCP协议和socket API 学习笔记 作者:gilb ...
- 如何结合自己本地数据库，使用【百度地图】API
如何结合自己本地数据库,使用[百度地图]API百度地图使用越来越多,官网上的示例数据都是写死的,实际上我们的开发中的数据都是从数据库中取出来的,最近看了很多大神的文章,结合自己本地数据库使用百度地图A ...
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
- 百度地图代码API
百度地图代码API: http://api.map.baidu.com/lbsapi/creatmap/index.html
随机推荐
- Java入门（三）：变量和运算符
上次谈到了Java的基本数据类型,今天接着聊Java的变量.运算符. 一.变量 1.变量的分类 变量分为成员变量.局部变量和常量,其中成员变量又分为实例变量.类变量. 2.变量的定义 语法:变量类型( ...
- 【算法】LeetCode算法题-Palindrome Number
这是悦乐书的第144次更新,第146篇原创 今天这道题和回文有关,即从前往后和从后往前是一样的,如"上海自来水来自海上"就是一个回文字符串,如整数121就是回文数,这些都是和回文相 ...
- 《Java大学教程》—第15章 异常
自测题:1. 什么是异常?P357异常是在程序生命周期内出现的事件,它会导致程序行为不可靠. 2. 已检查异常和未检查异常的区别是什么?P359在编译器允许程序被编译通过前,要求程序员必须编写代 ...
- 【Linux基础】VI 编辑器基本使用方法
vi编辑器是所有Unix及Linux系统下标准的编辑器.对Unix及Linux系统的任何版本,vi编辑器是完全相同的,它是Linux中最基本的文本编辑器. 第一章vi的三种模式 第二章vi文本编辑器 ...
- Nginx使用教程(二)：Nginx配置性能优化之worker配置
配置Nginx workers <br\>NGINX根据指定的配置运行固定数量的工作进程. 这些工作进程负责处理所有处理. 在下面的章节中,我们将调整NGINX worker参数. 这些参 ...
- 洛谷P1904
法一,数字太大,可能通过不了 #include <iostream>#include <algorithm>#include <cstdio>using nam ...
- python入门学习：7.函数
python入门学习:7.函数 关键点:函数 7.1 定义函数7.2 传递实参7.3 返回值7.4 传递列表7.5 传递任意数量的实参7.6 将函数存储在模块中 7.1 定义函数 使用关键字def ...
- P1563 玩具谜题（简单模拟）
就是一个简单模拟 #include<iostream> #include<string> using namespace std; ; int in[maxn], x[maxn ...
- 【vue】vue +element 搭建项目，Qs用途
1.安装 (c)npm install qs -S 2.用途 在 axios中,利用QS包装data数据 3.常见用法: import Qs from 'qs'; Qs.stringify(data) ...
- 003_webpack 配合babel 将es6转成es5
今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack - ...