1.百度地图标记点上添加数字
// 创建文本标注对象
var label = new BMap.Label('content', {
// 设置文本偏移量
offset : new BMap.Size(11, 8)
});
// 自定义文本标注样式
label.setStyle({
background:'none',
color:'#fff',
border:'none'
});
// 显示在标记点
marker.setLabel(label);
2.百度地图标注多个不同颜色样式坐标点
// 创建icon对象
var center_dot = new BMapGL.Icon("images/center_dot.png", new BMap.Size(30, 35));
center_dot.setImageSize(new BMap.Size(30, 35));
// 创建Marker标注，使用小车图标
var point = new BMapGL.Point(116.417, 39.909);
var marker = new BMapGL.Marker(point, {
icon: center_dot
});
// 将标注添加到地图
map.addOverlay(marker);
3.加载海量点，并携带数据显示信息窗口
// 海量默认点
var pointsArray = [
{lng: '120.13194', lat: '30.225157', info: 'point1'},
{lng: '120.218471', lat: '30.214333', info: 'point2'},
{lng: '120.270471', lat: '30.187511', info: 'point3'}]
var options = {
size: BMAP_POINT_SIZE_BIGGER,
shape: BMAP_POINT_SHAPE_CIRCLE,
color: '#EA0000'
};
// 添加海量点数据
var points = [];
for(var i = 0; i < pointsArray.length; i++){
let point = new BMap.Point(pointsArray[i].lng, pointsArray[i].lat);
// JavaScript是弱类型的，我们可以让point在加入到点集合PointCollection之前携带数据
point.info = pointsArray[i].info;
points.push(point);
}
// 初始化PointCollection
var pointCollection = new BMap.PointCollection(points, options);
// 实现pointCollection鼠标悬浮事件
pointCollection.addEventListener('mouseover', function (e) {
// 显示信息窗口
var opts = {
width : 250, //信息窗口宽度
height: 50, //信息窗口高度
title : "" //信息窗口标题
};
map.openInfoWindow(new BMap.InfoWindow(e.point.info, opts), e.point);
});
pointCollection.addEventListener('mouseout', function (e) {
// 关闭信息窗口
map.closeInfoWindow();
});
// 添加Overlay
map.addOverlay(pointCollection);
4.阻止marker点事件冒泡
地图上有一个标记点，当点击标记点的时候，会执行覆盖物绑定的事件；执行完之后，仍然会触发地图绑定的事件，也就是事件冒泡穿透了。
bmap进行了封装，将原始的事件放到了domEvent中。
marker.addEventListener("click", function(e){
// 阻止覆盖物事件冒泡到地图上
e.domEvent.stopPropagation();
// ...
});
5.信息窗口openInfoWindow 关闭
// 关闭信息窗口
map.closeInfoWindow();
代码实例（包含求海量坐标中心坐标，最佳目标点距离计算）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
<title>百度地图API</title>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-size: 16px;
}
#b-map {
height: 100%;
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
</head>
<body>
<div id="b-map"></div>
<script type="text/javascript">
const EARTH_RADIUS = 6378.137
// 手动mark的点集合
var dotInfoArray = []
// 默认点
var pointsArray = [
{lng: '120.13194', lat: '30.225157', info: 'point1'},
{lng: '120.218471', lat: '30.214333', info: 'point2'},
{lng: '120.270471', lat: '30.187511', info: 'point3'}]
// 创建地图实例
var map = new BMap.Map('b-map', {
restrictCenter: false,
enableMapClick:false
});
// 地址解析类
var gc = new BMap.Geocoder();
// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
var options = {
size: BMAP_POINT_SIZE_BIGGER,
shape: BMAP_POINT_SHAPE_CIRCLE,
color: '#EA0000'
};
// 添加海量点数据
var points = [];
for(var i = 0; i < pointsArray.length; i++){
let point = new BMap.Point(pointsArray[i].lng, pointsArray[i].lat);
// JavaScript是弱类型的，我们可以让point在加入到点集合PointCollection之前携带数据
point.info = pointsArray[i].info;
points.push(point);
}
// 初始化PointCollection
var pointCollection = new BMap.PointCollection(points, options);
// 实现pointCollection鼠标悬浮事件
pointCollection.addEventListener('mouseover', function (e) {
// 显示信息窗口
var opts = {
width : 250, //信息窗口宽度
height: 50, //信息窗口高度
title : "" //信息窗口标题
};
map.openInfoWindow(new BMap.InfoWindow(e.point.info, opts), e.point);
});
pointCollection.addEventListener('mouseout', function (e) {
// 关闭信息窗口
map.closeInfoWindow();
});
// 添加Overlay
map.addOverlay(pointCollection);
// 手动添加点标记
map.addEventListener('click', function (e) {
//
var select_dot = new BMap.Icon("images/select_dot.png", new BMap.Size(30, 35));
select_dot.setImageSize(new BMap.Size(30, 35));
// 创建点标记
var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), {icon: select_dot});
// 在地图上添加点标记
map.addOverlay(marker);
marker.addEventListener("click", function(e){
// 阻止覆盖物事件冒泡到地图上
e.domEvent.stopPropagation();
// 显示手动标记点位置信息窗口
gc.getLocation(marker.point, function(rs){
showLocationInfo(marker.point, rs, marker);
});
});
gc.getLocation(marker.point, function(rs){
// 获取该标记点到其他所有默认点的平均距离
let averDistance = getTotalDistance(marker)
// 获取该标记点的位置信息
var addComp = rs.addressComponents;
var address = "位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
let dotItem = {'marker': marker, 'averDistance': averDistance, 'address': address}
dotInfoArray.push(dotItem)
// 按照平均距离排名
showRanking()
});
});
// 根据所有默认点得到中心坐标点
processCenter();
function getTotalDistance(dot) {
var distance = 0
console.time('计时器1');
for (let j = 0; j < pointsArray.length; j++) {
let point = pointsArray[j];
distance = distance + getDistance(dot.point.lng, dot.point.lat, parseFloat(point.lng), parseFloat(point.lat));
}
console.timeEnd('计时器1');
return distance / pointsArray.length
}
function showRanking() {
// 排序
dotInfoArray = sort(dotInfoArray, 'averDistance')
console.log('点信息：', dotInfoArray)
for(let i = 0; i< dotInfoArray.length; i++) {
let dot = dotInfoArray[i];
let ranking = i + 1
// 创建文本标注对象
var label = new BMap.Label(ranking, {
// 设置文本偏移量
offset : new BMap.Size(11, 8)
});
// 自定义文本标注样式
label.setStyle({
background:'none',
color:'#fff',
border:'none'
});
map.removeOverlay(dot.marker.getLabel());
// 显示名次数字
dot.marker.setLabel(label);
}
}
function rad(d){
return d * Math.PI / 180.0;
}
// 根据经纬度坐标计算两点间距离
function getDistance(lng1, lat1, lng2, lat2) {
var radLat1 = rad(lat1);
var radLat2 = rad(lat2);
var a = radLat1 - radLat2;
var b = rad(lng1) - rad(lng2);
var s = 2 * Math.asin(Math.sqrt(
Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
s = s * EARTH_RADIUS;
s = (s * 10000) / 10;
return s;
}
// 显示地址信息窗口
function showLocationInfo(pt, rs, marker){
var opts = {
width : 250,
height: 100,
title : "当前位置："
}
var addComp = rs.addressComponents;
var addr = "地址：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>";
addr += "纬度: " + pt.lat + ", " + "经度：" + pt.lng;
//创建信息窗口对象
var infoWindow = new BMap.InfoWindow(addr, opts);
marker.openInfoWindow(infoWindow);
}
// 排序
function sort(arr, key){
for(var i = 0; i < arr.length - 1; i++){
for(var j = 0; j < arr.length - i - 1; j++){
// 相邻元素两两对比
if(arr[j][key] > arr[j+1][key]) {
var hand = arr[j];
arr[j] = arr[j+1];
arr[j+1] = hand;
}
}
}
return arr;
}
function processCenter(){
var tmp_center = getPointsCenter();
// 最优的点 弹跳动画
var point = new BMap.Point(tmp_center[1], tmp_center[0]);
map.centerAndZoom(point, 15);
var center_dot = new BMap.Icon("images/center_dot.png", new BMap.Size(30, 35))
center_dot.setImageSize(new BMap.Size(30, 35));
var marker = new BMap.Marker(point, {icon: center_dot});
// 跳动的动画
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
marker.addEventListener("click", function(e){
gc.getLocation(e.point, function(rs){
showLocationInfo(e.point, rs, marker);
});
});
// 将标注添加到地图中
map.addOverlay(marker);
// 设置最优点文本显示
var opts = {
width: 50,
height: 20,
title: '最优区域'
};
var infoWindow = new BMap.InfoWindow('2KM最优区域', opts);
map.openInfoWindow(infoWindow, new BMap.Point(tmp_center[1], tmp_center[0]));
// 绘制最优点区域
var circle = new BMap.Circle(new BMap.Point(tmp_center[1], tmp_center[0]), 2000, {
fillColor: 'blue',
strokeWeight: 3,
fillOpacity: 0.3,
strokeOpacity: 0.3
});
map.addOverlay(circle);
}
// 地理中心点
function getPointsCenter() {
// 坐标点个数
var point_num = pointsArray.length;
var X = 0, Y = 0, Z = 0;
for(let i = 0; i< pointsArray.length; i++) {
let point = pointsArray[i];
var lat, lng, x, y, z;
lat = parseFloat(parseFloat(point.lat)) * Math.PI / 180;
lng = parseFloat(parseFloat(point.lng)) * Math.PI / 180;
x = Math.cos(lat) * Math.cos(lng);
y = Math.cos(lat) * Math.sin(lng);
z = Math.sin(lat);
X += x;
Y += y;
Z += z;
}
console.log(X, Y)
X = X / point_num;
Y = Y / point_num;
Z = Z / point_num;
var tmp_lng = Math.atan2(Y, X);
var tmp_lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
return [tmp_lat * 180 / Math.PI, tmp_lng * 180 / Math.PI];
}
</script>
</body>
</html>
949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
