百度地图相关工具
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>覆盖物 <script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>marker <script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>路书工具 <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>多边形绘制工具 <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_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" />
<div id="allmap" style="overflow: hidden; position: relative; zoom: 1;">
<div id="map" style="-webkit-transition: all 0.5s ease-in-out; height: 95%; transition: all 0.5s ease-in-out;">
</div>
</div>
<input type="button" value="鼠标测距" onclick="openDis()">
<input type="button" value="清除所有覆盖物" onclick="clearAll()" />
<input type="button" value="获取区域选择的标注点集合" onclick="getOverlayPath()" />
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("map", {
enableMapClick: false
});
var point = new BMap.Point(112.86, 35.507);
map.centerAndZoom(point, 15);
var scaleControl = new BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
}); // 左下角,添加比例尺
map.addControl(scaleControl)
//鼠标测距
var myDis = new BMapLib.DistanceTool(map);
map.addControl(myDis)
// map.addEventListener("load", function () {
// myDis.open(); //开启鼠标测距
// //myDis.close(); //关闭鼠标测距
// });
function openDis() {//开启鼠标测距
myDis.open();
}
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// 编写自定义函数,创建标注
function addMarker(point, id) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
addClickHandler("id为:" + id, marker);
}
var opts = {
width: 100, // 信息窗口宽度
height: 80, // 信息窗口高度
title: "信息窗口", // 信息窗口标题
enableMessage: false //设置允许信息窗发送短息
};
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e);
});
}
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
// 随机向地图添加25个标注
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
var lngSpan = Math.abs(sw.lng - ne.lng);
var latSpan = Math.abs(ne.lat - sw.lat);
var allPointArray = [];
var markers = [];
for (var i = 0; i < 20; i++) {
var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() *
0.7));
allPointArray.push({
Point: point,
Id: i
});
addMarker(point, i);
//markers.push(point);
}
//最简单的用法,生成一个marker数组,然后调用markerClusterer类即可。
//var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers });
var b = {}
function aa(pointArray) {
var polygonPoints = "";
for (var i = 0; i < pointArray.length; i++) {
// if (i == 0) getFencePosition(pointArray[i].lng, pointArray[i].lat); // 获取围栏地理位置
polygonPoints = polygonPoints + pointArray[i].lng + "," + pointArray[i].lat + ";";
}
b.aaa = polygonPoints
}
var overlays = [];
var overlaycomplete = function (e) {
clearAll();
overlays.push(e.overlay);
e.overlay.enableEditing();
e.overlay.addEventListener("lineupdate", function (e) {
showLatLon(e.currentTarget);
});
var pointArray = e.overlay.getPath();
map.setViewport(pointArray); //调整视野
aa(pointArray)
};
var styleOptions = {
strokeColor: "red", //边线颜色。
fillColor: "red", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 2, //边线的宽度,以像素为单位。
strokeOpacity: 0.5, //边线透明度,取值范围0 - 1。
fillOpacity: 0.3, //填充的透明度,取值范围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);
function clearAll() {
for (var i = 0; i < overlays.length; i++) {
map.removeOverlay(overlays[i]);
}
overlays.length = 0;
}
function getOverlayPath() {
var box = overlays[overlays.length - 1];
var pointArray = box.getPath();
map.setViewport(pointArray); //调整视野
var bound = map.getBounds(); //地图可视区域
var s = "圈选的ID有:";
for (var i = 0; i < allPointArray.length; i++) {
if (bound.containsPoint(allPointArray[i].Point) == true) {
if (isInsidePolygon(allPointArray[i].Point, pointArray))
s += allPointArray[i].Id + ",";
}
}
alert(s);
}
var overlaysCache = [];
function showLatLon(a) {
var len = a.length;
var arr = [];
for (var i = 0; i < len - 1; i++) {
arr.push([a[i].lng, a[i].lat]);
}
this.overlaysCache = arr;
}
//判断一个标注点是否在多边形里
//pt标注点,poly多边形数组
function isInsidePolygon(pt, poly) {
for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
(pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i]
.lng) &&
(c = !c);
return c;
}
</script>
不要只满足于世界的表象,要勇于探索未知的可能

浙公网安备 33010602011771号