百度地图操作 描点 画圆 矩形 线条 计算面积 距离 坐标转换 JavaScript
2018-02-01 14:43
651 查看
<!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">
#allmap {
width: 900px;
height: 600px;
font-family: "微软雅黑";
padding-left: 0px;
float: left;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZlFv2wRgICUlrtCEwG8gTNGVoMgP1528"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></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" />
<script type="text/javascript" src="js/geoutils.js"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
<div id="carInfo" style="width: 410px;float: right;">查询car信息</div>
</body>
</html>
<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////
// 百度地图常用操作 包含功能
// 1.地图描点 更换点样式 点击点显示自定义详情
// 2.画圆，矩形，线条，多边形 获取所画图形面积，线条距离，坐标，判断自定义点是否在范围内
// 3.地址转换坐标
// 4.坐标转换地址
// 5.画图工具样式
// 6.作者 ：１２６９３２６６ 欢迎交流
//////////////////////////////////////////////////////////////////////////
//初始化函数
$(function() {
initBaiDuMap();
addCarInfo();
});
//模拟数据数据信息
var dataInfo = [{
name: "地址:丁白村",
longitude: 108.926677,
latitude: 34.225633
},
{
name: "地址:城西客运站",
longitude: 108.88071,
latitude: 34.279085
},
{
name: "地址:绿地蓝海大厦",
longitude: 108.890486,
latitude: 34.203292
},
{
name: "地址:汇鑫IBC",
longitude: 108.892021,
latitude: 34.203013
},
{
name: "地址:大唐芙蓉园",
longitude: 108.980295,
latitude: 34.218788
},
{
name: "地址:小寨地铁站",
longitude: 108.952914,
latitude: 34.229383
},
{
name: "地址:北山门村",
longitude: 108.926577,
latitude: 34.217458
},
{
name: "地址:陕西自然博物馆",
longitude: 108.952242,
latitude: 34.2035
},
{
name: "地址:陕西师范大学",
longitude: 108.962787,
latitude: 34.214724
},
{
name: "地址:陕西省科技厅",
longitude: 108.960637,
latitude: 34.271171
},
{
name: "地址:怡兴大厦",
longitude: 108.926375,
latitude: 34.208395
},
{
name: "地址:西安托朴利电器有限公司",
longitude: 108.85529,
latitude: 34.19704
}
];
//地图全局变量
var map;
//图画样式 -- 圆红色边框
var styleOptions = {
strokeColor: "red", //边线颜色。
fillColor: "white", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 2, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
//图画样式 -- 框绿色边框
var styleOptionsGree = {
strokeColor: "green", //边线颜色。
fillColor: "white", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 2, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
//初始化百度地图
function initBaiDuMap() {
map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom("西安", 12);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
enableCalculate: true, //是否开启测量模式
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
scale: 0.8, //工具栏缩放比例
drawingModes: [
BMAP_DRAWING_CIRCLE,
BMAP_DRAWING_RECTANGLE,
BMAP_DRAWING_POLYLINE,
BMAP_DRAWING_POLYGON
]
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptionsGree //矩形的样式
});
drawingManager.addEventListener('overlaycomplete', function(e) {
//关闭画图
drawingManager.close();
//获取所画图形类型
var drawingModeType = e.drawingMode;
var num = 0;
//判断所画区域车辆数
dataInfo.forEach(function(value) {
var point = new BMap.Point(value.longitude, value.latitude);
if(drawingModeType == "circle") {
if(BMapLib.GeoUtils.isPointInCircle(point, e.overlay)) {
num++;
}
} else if(drawingModeType == "rectangle") {
if(BMapLib.GeoUtils.isPointInPolygon(point, e.overlay)) {
num++;
}
}
});
//获取圆半径，中心点
if(drawingModeType == "circle") {
console.log("圆心坐标 --- " + e.overlay.getCenter().lng + " --- " + e.overlay.getCenter().lat);
console.log("圆半径 --- " + e.overlay.getRadius() + "（米） ");
console.log("圆面积 --- " + e.calculate);
} else if(drawingModeType == "rectangle") {
//获取矩形坐标
var path = e.overlay.getPath();
console.log("左上角坐标 --- " + path[0].lng + " --- " + path[0].lat);
console.log("右上角坐标 --- " + path[1].lng + " --- " + path[1].lat);
console.log("右下角坐标 --- " + path[2].lng + " --- " + path[2].lat);
console.log("左下角坐标 --- " + path[3].lng + " --- " + path[3].lat);
console.log("矩形面积 --- " + e.calculate);
} else if(drawingModeType == "polygon") { //画多边形
var path = e.overlay.getPath();
path.forEach(function(value, index) {
console.log("第" + (index + 1) + "次坐标为：" + value.lng + " --- " + value.lat);
});
//获取多边形面积 偶尔会出现O，不太清楚那里有问题
console.log("多边形形面积 --- " + e.calculate);
} else if(drawingModeType == "polyline") { //画线条
var path = e.overlay.getPath();
path.forEach(function(value, index) {
console.log("第" + (index + 1) + "次坐标为：" + value.lng + " --- " + value.lat);
});
//计算两点距离 画线时每条线条长度
var distance = BMapLib.GeoUtils.getDistance(new BMap.Point(path[0].lng, path[0].lat), new BMap.Point(path[1].lng, path[1].lat));
console.log("第一条线条长度 -- " + distance + "（米）");
console.log("线条总长度 --- " + e.calculate + "（米）");
}
drawingModeType = drawingModeType == "circle" ? "圆" : "矩形";
document.getElementById("carInfo").innerHTML = drawingModeType + "区域总共有" + num + "车";
});
//地图根据坐标解析地址
var geoc = new BMap.Geocoder();
var pt = new BMap.P
92ca
oint(108.85529, 34.19704);
geoc.getLocation(pt, function(rs) {
var addComp = rs.addressComponents;
console.log("省份：" + addComp.province + "，城市：" + addComp.city + "，区县： " + addComp.district + "，街道： " + addComp.street + "，街道编号：" + addComp.streetNumber);
});
//地图根据地址转换坐标
geoc.getPoint("西安市雁塔区北山门村", function(point) {
console.log("坐标为：" + point.lng + "," + point.lat);
//将转换的点，添加到地图上
/*if(point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
} else {
alert("您选择地址没有解析到结果!");
}*/
}, "西安市");
}
//添加车辆到地图
function addCarInfo() {
dataInfo.forEach(function(value) {
//更改地图默认点为小汽车
var myIcon = new BMap.Icon("img/redcar.png", new BMap.Size(23, 23));
var marker = new BMap.Marker(new BMap.Point(value.longitude, value.latitude), {
icon: myIcon
});
marker.addEventListener("click", function(e) {
openDataInfo(value, e);
});
map.addOverlay(marker);
});
}
//点击地图车辆打开详细信息
function openDataInfo(car, e) {
//窗口信息设置
var opts = {
width: 250, // 信息窗口宽度
height: 80, // 信息窗口高度
title: "车辆信息", // 信息窗口标题
enableMessage: true //设置允许信息窗发送短息
};
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow("<div style='width:400px;higth:300px;'>" + car.name + "</div>", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度地图开发工具类，包括计算坐标距离，坐标转换
- 百度地图与谷歌地图坐标转换，WGS84、GCJ02、BD09地图坐标系间的坐标转换及坐标距离计算
- php实现计算百度地图坐标之间距离的方法
- java根据经纬度坐标计算两点的距离算法，与百度地图测距工具相符
- C++设计并测试一个名为Rectangle的矩形类，其属性为矩形的左下角与右下角两个点的坐标，根据坐标计算矩形的面积
- 根据两点间经纬度坐标（double值）计算两点间距离，LBS操作相关工具类
- 火星坐标与地球坐标的转换，以及地球上两点之间的距离计算
- 作业2：设计并测试一个名为Rectangle的矩形类，其属性为矩形的左下角与右上角两个点的坐标，根据坐标能计算出矩形的面积
- JavaScript——计算矩形面积
- 7.设计一个抽象类Shape, 属性为x和y，表示圆心坐标，计算面积的抽象方法double area()，并设计一个计算圆心距离坐标原点距离的方法distance(double x ,double y
- php实现计算百度地图坐标之间距离的方法
- (十七)WebGIS中距离及面积测量的原理和实现以及坐标转换的简单介绍
- JavaScript 根据两点的经纬度坐标，计算实际的直线距离
- 各地图gps坐标系统比较与转换以及经纬度距离计算MATLAB脚本
- 从百度地图API中抠出来的一个js方法，计算百度地图坐标距离
- 百度地图计算两坐标点之间距离计算
- javascript挑战编程技能-第三题：计算矩形房间面积
- 根据经纬度计算距离的公式、百度坐标转换成GPS坐标(PHP版)
- 百度地图计算两坐标之间的距离