鱼C论坛

 找回密码
 立即注册
查看: 3510|回复: 0

[学习笔记] 百度地图api添加不同标注

[复制链接]
发表于 2021-4-2 09:47:51 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
承接之前的添加标注点以及监听事件那篇帖子
本次代码修改允许:1.自定义标记。2.对不同的点,可以有不同的标记。
详见第89-124行
<!DOCTYPE html> 
<html>
    <head> 
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>Hello, World</title> 
        <style type="text/css"> 
            html{height:100%} 
            body{height:100%;margin:0px;padding:0px} 
            #container{height:100%} 
        </style> 
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=yourkey">
        </script>
    </head> 
  
    <body> 
        <div id="container"></div>
        <!--初始化地图经纬度-->
        <?php $longitude = ???;?>
        <?php $latitude = ???;?>
        <script type="text/javascript">
            // 创建地图实例
            var map = new BMapGL.Map("container");
            //接收PHP传递的变量
            var lng = <?php echo $longitude;?>;
            var lat = <?php echo $latitude; ?>;
            // 创建点坐标
            var point = new BMapGL.Point(lng, lat);
            // 初始化地图,设置中心点坐标和地图级别 
            map.centerAndZoom(point, 15);
            //设置鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
            //设置缩放角度
            map.setHeading(64.5);   //设置地图旋转角度
            map.setTilt(73);       //设置地图的倾斜角度 
            //添加控件
            var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
            map.addControl(scaleCtrl);
            var opts = {
                anchor:BMAP_ANCHOR_TOP_RIGHT
            }
            var zoomCtrl = new BMapGL.ZoomControl(opts);  // 添加缩放控件
            map.addControl(zoomCtrl);

            //执行SQL语句,获取结果集。
            //解析结果集,获取记录集。
            <?php
            //添加公共文件
            include_once 'mysql_public.php';
            //获取前100条管道信息
            $sql = "SELECT * FROM `lines` LIMIT 100";
            //获取结果集
            $res = myerror($sql);
            //获取结果集数据条数:多少行记录
            $rows =  mysqli_num_rows($res);
            //保存取出的记录:
            $points = array();
            //利用while获取,每次取到数据之后判断保存数据的结果,只要结果不为false,那么一直取
            while($row = mysqli_fetch_assoc($res))
            {
                $points[] = $row;    //于是point成为二维数组
            }
            //将坐标集转换为json格式,为js的接收做准备
            $jsonstr = json_encode($points);
            ?>

            //在JavaScript中接收PHP中的变量值
            var json = <?=$jsonstr?>;
            var rows = <?=$rows?>;
            //JavaScript获取PHP数组:
            //将php数组转成json编码,然后通过eval函数,转成js数组
            var points = eval(json);
            //获取坐标点集
            //准备一个数组存放坐标点集
            var polylinePointsArray = [];
            for(var index = 0; index < rows; index++)
            {
                var x = points[index]['lng'] + 0.000;
                var y = points[index]['lat'] + 0.000;
                polylinePointsArray[index] = new BMapGL.Point(x,y);
            }

            //添加折线
            //源代码中各个坐标点是存在一个中括号内,表示所有坐标点存在于一个数组当中。
            //现已将坐标点存入数组,所以没有必要再加中括号了。
            var polyline = new BMapGL.Polyline(polylinePointsArray, {strokeColor:"blue", strokeWeight:8, strokeOpacity:0.5});   //创建折线
            map.addOverlay(polyline);          //增加折线

            //添加标注点
            for(index = 0; index < rows; index++)
            {
                if(points[index]['type']=="???")
                {
                    //自定义图标
                    var myIcon = new BMapGL.Icon("../img/risk_red.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 25)
                    });
                    //添加标记与监听事件
                    overlayMarker(polylinePointsArray[index],myIcon);
                }
                else if(points[index]['type']=="???")
                {
                    //自定义图标
                    var myIcon = new BMapGL.Icon("../img/risk_yellow.png", new BMapGL.Size(23, 25),{
                        //图标定位
                        offset: new BMapGL.Size(10, 25)
                    });
                    //添加标记与监听事件
                    overlayMarker(polylinePointsArray[index],myIcon);
                }
            }

            //添加标记与监听事件
            function overlayMarker(point,MyIcon)
            {
                var marker = new BMapGL.Marker(point,{icon: MyIcon});
                map.addOverlay(marker);
                //为marker添加title,方便以后索引
                marker.setTitle(points[index]['name']);
                //添加监听事件
                marker.addEventListener('click', overlayStyle);
            }

            //获取覆盖物属性
            function overlayStyle(e)
            {
                var p = e.target;
                alert(p.getTitle());
            }


        </script> 
    </body> 
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 20:01

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表