百度地图API根据经纬度画扇形，并添加LABEL标签和，增加隐藏和显示按钮

最新推荐文章于 2023-11-07 22:57:12 发布

卖身买镜头

最新推荐文章于 2023-11-07 22:57:12 发布

阅读量1.7k

点赞数 1

文章标签： js html

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

版权

百度地图API根据经纬度和方向角画扇形，
根据内容对每个扇形多边形添加LABEL标签
在这里插入图片描述
当鼠标悬停在扇形上时，扇形改变颜色。

鼠标点击在扇形上，会跳出信息窗口

创建4个按钮，
两个按钮为显示和隐藏扇形的按钮
两个按钮为显示和隐藏扇形标签的按钮

废话不多说，上代码
,最终效果图见最后

<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%;}
        #control {
   
        position: absolute;
        bottom: 15px;
    }
    .button {
   
        margin: 5px;
        padding: 13px 23px;
        border-radius: 10px;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
        font: 16px/14px Tahoma, Verdana, sans-serif;
        text-align: center;
        color: #fefefe;
        background: #1e90ff;
    }
	</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>
    <!-- <p>在地图上添加一个椭圆，圆的颜色为蓝色、线宽6px、透明度为1，填充颜色为白色，透明度为0.5</p> -->
    <div id="control">
        <div onclick="showOver()" class="button">显示扇区</div>
        <div onclick="hideOver()" class="button">隐藏扇区</div>
        <div onclick="showLabel()" class="button">显示标签</div>
        <div onclick="hideLabel()" class="button">隐藏标签</div>
    </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 = [
    ['317443', '11', '5704单管塔', '5704单管塔_1', '1', '宏站', 126.42956333622031, 44.00636957571581, '100', '90', '1650', '华为\n'], 
    ['317443', '21', '5704单管塔', '5704单管塔_2', '2', '宏站', 126.42956333622031, 44.00636957571581, '200', '317', '1650', '华为\n'], 
    ['317443', '81', '5704单管塔', '5704单管塔_2（2100MCA）', '8', '宏站', 126.42956333622031, 44.00636957571581, '200', '317', '350', '华为\n']
];

    //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

最低0.47元/天解锁文章