百度地图API根据经纬度批量画扇形并且添加信息窗口

最新推荐文章于 2023-09-26 15:11:13 发布

卖身买镜头

最新推荐文章于 2023-09-26 15:11:13 发布

阅读量1.1k

点赞数 4

文章标签： html js 百度

本文链接：https://blog.csdn.net/qq_40922589/article/details/105844463

版权

百度地图API根据经纬度和方向角批量画扇形
并且给每一个扇形添加信息窗口，
添加鼠标悬停的效果，鼠标悬停在扇区上，扇区颜色加深。鼠标离开后扇区颜色恢复正常。
点击扇区会出现信息窗口。
最终效果见本文最后图片。

<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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{height:100%;width:100%;}
		#r-result{width:100%;}
	</style>
	 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的KEY"></script>
	<title>添加/删除覆盖物</title>
</head>
<body>
    <div id="allmap"></div>
</body>
 </html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(126.532, 43.877);
map.centerAndZoom(point, 13);

//点经纬度
var mapPoints = [
                [126.53188596741032, 43.87523623369912, 0,"我是A","老大"],
                [126.53188596741032, 43.87523623369912, 120,"我是B","老二"],
                [126.53188596741032, 43.87523623369912, 240,"我是C","老三"]             
            ];

    //centre:椭圆中心点,X:横向经度,Y:纵向纬度
function add_oval(centre, x, y) {
    var assemble = new Array();
    var angle;
    var dot;
    var tangent = x / y;
    for(i = 0; i < 36; i++) {
        angle = (2 * Math.PI / 36) * i;
        dot = new BMap.Point(centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y);
        assemble.push(dot);
    }
    return assemble;
}

//以画多边形区域的方法画扇形区域 画出以point2点为圆心，半径为radius，夹角从sDegree到eDegree的扇形
//Sector1(point,300,10,60,"hello")
function Sector1(point2, radius, sDegree, eDegree, opts) {
    var points = []; //创建构成多边形的点数组  
    var step = ((eDegree - sDegree) / 10) || 10; //根据扇形的总夹角确定每步夹角度数，最大为10  
    points.push(point2);
    for(var i = sDegree; i < eDegree + 0.001; i += step) { //循环获取每步的圆弧上点的坐标，存入点数组 
        points.push(EOffsetBearing(point2, radius, i));
    }
    points.push(point2);
    if(sDegree == eDegree) {
        var planepoint = points[1];
        // var myIcon = new BMap.Icon("../images/uav.png",
        //     new BMap.Size(36, 36));
        var marker = new BMap.Marker(planepoint);
        // , {icon: myIcon}
        // );
        var opts = {
            width : 200,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title : "海底捞王府井店" , // 信息窗口标题
            };
        map.addOverlay(marker);  
        var infoWindow = new BMap.InfoWindow("信息:", opts); // 创建信息窗口对象
        marker.addEventListener("click", function() {
            map.openInfoWindow(infoWindow, planepoint); // 开启信息窗口
            //window.external.Test(sDegree);
        });
    
        map.addOverlay(marker);
    }
    return points;
}

//使用数学的方法计算需要画扇形的圆弧上的点坐标
function EOffsetBearing(point3, dist, bearing) {
    var lngConv = map.getDistance(point3, new BMap.Point(point3.lng + 0.1, point3.lat)) * 10; //计算1经度与原点的距离
    var latConv = map.getDistance(point3, new BMap.Point(point3.lng, point3.lat + 0.1)) * 10; //计算1纬度与原点的距离
    var lat = dist * Math.sin(bearing * Math.PI / 180) / latConv; //正弦计算待获取的点的纬度与原点纬度差
    var lng = dist * Math.cos(bearing * Math.PI / 180) / lngConv; //余弦计算待获取的点的经度与原点经度差
    return new BMap.Point(point3.lng + lng, point3.lat + lat);
}

// 创建扇形
function makesectors(mapPoints){
    for(var i=0;i<mapPoints.length;i++){
        var point = new BMap.Point(mapPoints[i][0], mapPoints[i][1]);
        var azimuth1 = 90-mapPoints[i][2]-20
        var azimuth2 = 90-mapPoints[i][2]+20
        var oval = new BMap.Polygon(Sector1(point,300,azimuth1,azimuth2,"hello"), {
            strokeColor: "blue",
            strokeWeight: 1,
            strokeOpacity: 0.5,
            fillColor:"blue",
            setFillOpacity: 0.5
        });          
        map.addOverlay(oval);
        var content = mapPoints[i][3];     //获取内容            
        var centerPoint = oval.getBounds().getCenter();         
        addClickHandler(content,oval); //调鼠标用点击事件
        addmouseoverer(oval);//调鼠标悬停事件
        addmouseouter(oval);//调用鼠标离开事件
    }   
}    
// 点击事件
function addClickHandler(content,marker){
    marker.addEventListener("click",function(){
        openInfo(content,marker.getBounds().getCenter())}
    );
}
// 定义信息窗口样式
var opts = {
            width : 250,     // 信息窗口宽度
            height: 80,     // 信息窗口高度
            title : "信息窗口" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
            };
// 打开信息窗口

function openInfo(content,infopoint){    
    var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
    map.openInfoWindow(infoWindow,infopoint); //开启信息窗口
}      
// 鼠标飘过
function addmouseoverer(oval){
    oval.addEventListener("mouseover",function(){
        // oval.setStrokeColor("red");
        oval.setStrokeWeight(2);//边界变宽
        oval.setStrokeOpacity(1);//边界颜色变深
        oval.setFillOpacity(1);//填充颜色变深
        
            // map.addOverlay(secRingLabel);
            // map.panTo(secRingCenter);
    });
}   

// 鼠标移开
function addmouseouter(oval){
    oval.addEventListener("mouseout",function(){
        // oval.setStrokeColor("blue");
        oval.setStrokeWeight(1);//边界恢复
        oval.setStrokeOpacity(.5);//边界透明度变化
        oval.setFillOpacity(.5);//填充颜色变化
            // map.removeOverlay(secRingLabel);
    });
}
           

makesectors(mapPoints);
map.enableScrollWheelZoom();  
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());   
</script>

最终效果图如下：
在这里插入图片描述

卖身买镜头

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
百度地图API根据经纬度批量画扇形并且添加信息窗口

百度地图API批量添加扇形并且给每一个扇形添加信息窗口，添加鼠标悬停的效果<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, use...
复制链接

扫一扫