都是一些百度地图的API接口，没有什么特殊说明的直接上代码，这个页面全部贴出来，如果需要测试，可以全部copy，然后研究。主要有一些js文件是联网下载，所以必须在有网了的情况下再去运行
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&meta name=&viewport& content=&initial-scale=1.0, user-scalable=no& /&
&style type=&text/css&&
body, html{width: 100%;height: 100%;margin:0;font-family:&微软雅黑&;}
#allmap {width: 100%; height:500 overflow:}
#result {width:100%;font-size:12}
dl,dt,dd,ul,li{
padding:0;
list-style:
p{font-size:12}
font-size:14
font-family:&微软雅黑&;
font-weight:
border-bottom:1px dotted #000;
padding:5px 0 5px 5
margin:5px 0;
padding:5px 0 0 5
line-height:28
&script type=&text/javascript& src=&http://api./api?v=2.0&ak=5E5EE28affe2ce2a3667859&&&/script&
&!--加载鼠标绘制工具--&
&script type=&text/javascript& src=&http://api./library/DrawingManager/1.4/src/DrawingManager_min.js&&&/script&
&link rel=&stylesheet& href=&http://api./library/DrawingManager/1.4/src/DrawingManager_min.css& /&
&!--加载检索信息窗口--&
&script type=&text/javascript& src=&http://api./library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js&&&/script&
&link rel=&stylesheet& href=&http://api./library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css& /&
&title&百度地图API功能演示&/title&
&div id=&allmap& style=&overflow:zoom:1;position:&&
&div id=&map& style=&height:100%;-webkit-transition: all 0.5s ease-in-transition: all 0.5s ease-in-&&
&div id=&result&&
&input type=&button& value=&获取绘制的覆盖物个数& onclick=&alert(overlays.length)&/&
&input type=&button& value=&清除所有覆盖物& onclick=&clearAll()&/&
&input type=&button&
value=&获取多边形的顶点& onclick=&getPoint()&/&&br/&
&input type=&button&
value=&开启线、面编辑功能& onclick=&Editing('enable')&/&
&input type=&button&
value=&关闭线、面编辑功能& onclick=&Editing('disable')&/&
&input type=&button&
value=&显示原有多边形& onclick=&showPolygon(this)& /&&br/&
&input type=&button&
value=&画多边形& onclick=&draw(BMAP_DRAWING_POLYGON)& /&
&input type=&button&
value=&画矩形& onclick=&draw(BMAP_DRAWING_RECTANGLE)& /&
&input type=&button&
value=&画线& onclick=&draw(BMAP_DRAWING_POLYLINE)& /&
&!-- &input type=&button&
value=&画点& onclick=&draw(BMAP_DRAWING_MARKER)& /&--&
&span&右键获取任意点的经纬度&/span&
&div id=&resultShape&&&/div&
&div id=&shape&&坐标为&/div&
&script type=&text/javascript&&
function $(id){
return document.getElementById(id);
// 百度地图API功能
var map = new BMap.Map('map');
var poi = new BMap.Point(113..530844);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var overlays = [];
var overlaycomplete = function(e){
overlays.push(e.overlay);
var styleOptions = {
strokeColor:&red&,
//边线颜色。
fillColor:&red&,
//填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3,
//边线的宽度，以像素为单位。
strokeOpacity: 0.8,
//边线透明度，取值范围0 - 1。
fillOpacity: 0.6,
//填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
//enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('overlaycomplete', overlaycomplete);
map.addEventListener(&rightclick&,function(e){
if(confirm(e.point.lng + &,& + e.point.lat)){
$(&shape&).innerHTML=$(&shape&).innerHTML+& &br/&(&+e.point.lng+&,&+e.point.lat+&)&;
function draw(type){
drawingManager.open();
drawingManager.setDrawingMode(type);
function clearAll() {
for(var i = 0; i & overlays. i++){
map.removeOverlay(overlays[i]);
overlays.length = 0
function getPoint(){
$(&resultShape&).innerHTML='';
for(var i = 0; i & overlays. i++){
var overlay=overlays[i].getPath();
$(&resultShape&).innerHTML=$(&resultShape&).innerHTML+overlay.length+'边形:&br/&';
for(var j = 0; j & overlay. j++){
var grid =overlay[j];
$(&resultShape&).innerHTML=$(&resultShape&).innerHTML+(j+1)+&个点:(&+grid.lng+&,&+grid.lat+&);&br/&&;
function Editing(state){
for(var i = 0; i & overlays. i++){
state=='enable'?overlays[i].enableEditing():overlays[i].disableEditing();
showPolygon(btn){
var polygon = new BMap.Polygon([
new BMap.Point(113..530777),
new BMap.Point(113..527789),
new BMap.Point(113.597),
new BMap.Point(113..530618)
], styleOptions);
//创建多边形
map.addOverlay(polygon);
//增加多边形
// overlays.push(polygon); //是否把该图像加入到编辑和删除行列
btn.setAttribute('disabled','false');
showText();
function showText(){
var opts = {
position : new BMap.Point(113..530777),
// 指定文本标注所在的地理位置
: new BMap.Size(30, 30)
//设置文本偏移量
var label = new BMap.Label(&不可编辑&, opts);
// 创建文本标注对象
label.setStyle({
color : &black&,
fontSize : &16px&,
fillColor:&red&,
//填充颜色。当参数为空时，圆形将没有填充效果。
map.addOverlay(label);
本文已收录于以下专栏：
相关文章推荐
实现思路：
1：添加绘制工具的监听事件
2：遍历取出坐标集合
body, html{width: 100%;height: 100%...
1.使用百度地图画多边形并保存坐标
#allmap {width: 100%; height:500 overflow:}
var map,...
view plaincopy
meta http-equiv="Content-Type" co...
本节学习用 D3 制作地图的方法。需要用到 GeoJSON 文件，这个文件的获取比较困难，我花了一些时间制作好了，希望能与大家分享。本文使用中国地图的数据进行绘制。...
在使用百度Map开放API进行开发的时候，遇到了一个需求，很简单的一个需求。
→用户需要在地图上画一个矩形，根据矩形的边界值查询数据（主要在卫星数据的时空检索上使用）
没有想到的是，我翻遍了百度Map...
* Author: mobai
* http://mobai./
* 转载请注明出处
业务需要 指定一个地图上的范围,为了便于采集坐标数据,开发以下程序
body, html {
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)地图多边形编辑删除点
代码参考：/zppaa/mapEdit
本文已收录于以下专栏：
相关文章推荐
业务需要 指定一个地图上的范围,为了便于采集坐标数据,开发以下程序
body, html {
1. 射线法介绍
在地图应用上，我们会经常需要判断一个点是否位于多边形区域内，这里介绍下采用射线法如何实现。
算法思想：从待判断的点向某一个方向引射线，计算和多边形交点的个数，如果个数是偶数或者0...
首先我们实现的功能是点击地图标记通过动画的形式落到地图上，当点击多点的时候会形成一片不规则的多边形区域，并且判断某一点是否在这个区域。
实现这个功能我们需要对google map 上的marke...
功能需求：订单分类（将每笔订单按照所在区域分类），故根据订单收货地址的经纬度来判断订单所在的商业区
import java.awt.geom.Point2D;
import java.util.Ar...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)博客分类：
在百度地图上画多边形区域，
&META http-equiv="Content-Type" content="text/ charset=utf-8"&
&title&百度地图画多边形&/title&
&style type="text/css"&
body, html,#allmap {width: 100%;height: 100%;overflow:margin:0;}
&script type="text/javascript" src="http://api./api?key=&v=1.3"&&/script&
&script type="text/javascript"&
function initialize() {
// 百度地图API功能
map = new BMap.Map("map_canvas");
map.addControl(new BMap.NavigationControl());
// 添加平移缩放控件
map.addControl(new BMap.ScaleControl());
// 添加比例尺控件
map.addControl(new BMap.OverviewMapControl());
//添加缩略地图控件
map.enableScrollWheelZoom();
//启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl());
//添加地图类型控件
map.setMapType(BMAP_SATELLITE_MAP);
var point = new BMap.Point(108.896, 34.330);
// 创建点坐标
map.centerAndZoom(point,13);
// 初始化地图,设置中心点坐标和地图级别。
var polygon = new BMap.Polygon([
new BMap.Point(108..298633),
new BMap.Point(108.8075),
new BMap.Point(108..319744),
new BMap.Point(108..331431),
new BMap.Point(108.8354),
new BMap.Point(108..351223),
new BMap.Point(108..355872),
new BMap.Point(108..366123),
new BMap.Point(108..302808),
new BMap.Point(108..300422),
new BMap.Point(108..291714),
new BMap.Point(108..291833),
new BMap.Point(108..296605)
], {strokeColor:"#f50704",fillColor:"", strokeWeight:3, strokeOpacity:0,fillOpacity:0,});
map.addOverlay(polygon);
//showToolAutoDef();
&body onLoad="initialize()"&
&div id="map_canvas" style="width: 100%; height: 100%;"&&/div&
var point = new BMap.Point(108.896, 34.330);
------&定位地图
new BMap.Point(108..298633)---&点的坐标
map.centerAndZoom(point,13);-----&数字是地图的尺寸
strokeColor:"#f50704",-------&线条颜色
fillColor:"", ------&多边形区域的颜色
下载次数: 185
浏览 15192
浏览: 77477 次
来自: 安徽
竟然没人来评论？？不错的学习源码啊，不过LZ没有给出表格，这有 ...
best_yuan 写道好像运行不了，缺少spring包
没啊 ...
请问Linux下中文乱码，遇到过吗？如何解决？
好像运行不了，缺少spring包
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'}