百度地图Api如何更改标注点的颜色?

Question

 function map_init() {
        //将var marker定义为成员变量
        var marker;
        // 百度地图API功能
        var map = new BMap.Map("map");
        var point = new BMap.Point(116.706575, 34.715584);
        map.centerAndZoom(point, 12);
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        // 编写自定义函数,创建标注
        function addMarker(point) {
            marker = new BMap.Marker(point);


        }

        //单击获取点击的经纬度
        var x;
        var y;
        map.addEventListener("click", function (e) {
            var point = new BMap.Point(e.point.lng, e.point.lat);
            addMarker(point);
            x = e.point.lng;
            y = e.point.lat;
            // console.log(e.point.lng + "," + e.point.lat);


            $("#btn2").click(function () {
                if (x==undefined || y==undefined){
                    alert("请选择")
                    return;
                }
                $("#lng").val(x);
                $("#lat").val(y);


                var lng = document.getElementById("lng").value;
                var lat = document.getElementById("lat").value;
                window.location.href = './add?'+"x="+x+"&"+"y="+y;
            })

        });


        $(function () {
            var url='/user/findEquipmentsByUserName'+ '?tmptime=' + (new Date()).getTime();;
            var zh = '[[${session.zh}]]';
            $.ajax({
                url:url,
                type:'get',
                data:{
                    zh:zh
                },
                datatype:'json',
                success:function (data) {
                    $.each(data.data,function (index,item) {
                        var equipments = item.equipments;
                        map.clearOverlays();
                        var markerArr=eval(equipments);//后台得到的数据包含经纬度，json格式的
                        var point = new Array();//存放标注点经纬信息的数组
                        var marker = new Array();//存放标注点对象的数组
                        for (var i =0;i<markerArr.length;i++){
                            //按照原数组的point格式将地图点坐标饿经纬度分别提出来
                            var p0 = markerArr[i].lng.split(",")[0];//经度
                            var p1 = markerArr[i].lat.split(",")[0];//维度
                            point[i] = new BMap.Point(p0,p1);//循环生成新的地图点
                            marker[i]  = new BMap.Marker(point[i]);//按照地图点坐标生成标记

                            map.addOverlay(marker[i]);//把标记的点添加到地图上

                            var label = new BMap.Label(
                                markerArr[i].facilityname,{offset:new BMap.Size(20,-10)}
                                );

                            var clo="";

                            if(markerArr[i].angle<=5){
                                clo="#ff0000";//红色
                            }else{
                                clo="#3fce2c";//绿色
                            }

                            //文本标setStyle设置样式值
                            label.setStyle({
                                border:'none',
                                border:'1px solid'+clo,
                                color:clo,
                            });

                            marker[i].setLabel(label);


                            // marker.setLabel(label);

                            //添加点击事件
                            (function(){
                                var _json = markerArr[i];
                                var _iw = createInfoWindow(_json);
                                var _marker =  marker[i];
                                _marker.addEventListener("mouseover",function(){
                                    this.openInfoWindow(_iw);
                                });
                            })()

                        }
                    })
                    //创建InfoWindow
                    function createInfoWindow(markerArr){

                        console.log(markerArr)
                        // console.log(json);
                        var opts1 = {
                            title : '<span style="font-size:20px;color:#0A8021">设备信息</span>'
                        };
                        if (markerArr.angle==null){
                            markerArr.angle=0;
                        }
                        if (markerArr.temp==null){
                            markerArr.temp=0;
                        }
                        if (markerArr.voltage==null){
                            markerArr.voltage=0;
                        }
                        if (markerArr.water==1){
                            markerArr.water="有";
                        }else{
                            markerArr.water="无";
                        }
                        if (markerArr.updatetime==null){
                            markerArr.updatetime=0;
                        }

                        var iw = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'>" +
                            "<b style='font-size: 15px;'>设备名:&nbsp;&nbsp;</b><span style='font-size: 15px;'>"+ markerArr.facilityname+"</span></br>" +
                            "<b style='font-size: 15px;'>角度:&nbsp;&nbsp;</b><span style='font-size: 15px;'>"+markerArr.angle+"</span></br>" +
                            "<b style='font-size: 15px;'>浸水:&nbsp;&nbsp;</b><span style='font-size: 15px;'>"+markerArr.water+"</span></br>" +
                            "<b style='font-size: 15px;'>电压:&nbsp;&nbsp;</b><span style='font-size: 15px;'>"+ markerArr.voltage+"</span></br>" +
                            "<b style='font-size: 15px;'>更新时间:&nbsp;&nbsp;</b><span style='font-size: 15px;'>"+"<br/>"+markerArr.updatetime+"</span></br>" +

                            "</a>" +
                            "</div>", opts1);
                        return iw;
                    }

                }
            })
        })
    }

这是我的部分代码,此时地图上显示的都是红色的标注点,我想根据我的值来更改颜色,比如 角度小于等于5的让标注点为绿色,高于5的都为红色,有没有大佬知道怎么做?

Answer 1

http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay
marker实际上是一张图片，在你的代码里面加一层判断if(json.angle<5){}else{}

var icon;
if(json.angle <= 5){
    icon = new BMapGL.Icon("green-markers.png", new BMapGL.Size(23, 25),{imageOffset: new BMapGL.Size(47,52)});
}else{
    icon = new BMapGL.Icon("red-markers.png", new BMapGL.Size(23, 25),{imageOffset: new BMapGL.Size(47,52)});
}
var marker = new BMapGL.Marker(point, {icon: icon});   
map.addOverlay(marker);