百度地图自定义图标

百度地图自定义图标

 function initMap(){
    // 百度地图API功能
        var map = new BMap.Map("map_div");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(113.206219, 28.193035), 14);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        var size1 = new BMap.Size(10, 50);
        map.addControl(new BMap.MapTypeControl({
            offset: size1,
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP,
    
            ]
        }));
    
        $.ajax({
            url:"后台请求地址",
            dataType: "json",
            success: function (jsondata){
                var basicList=jsondata.result.records;
                var i=0;
                var points=[];
                for (var item in basicList){
                    (function (x) {
                        //创建标注
                        var pt = new BMap.Point(basicList[item].longitude, basicList[item].latitude);
                        points[i] = pt;
                        /*定义一个icon变量,用于接收自己定义的图片*/
                        var myIcon="";
                        /*判断企业状态,修改图片颜色*/
                        if(basicList[item].riskLevel=="1"){
                        	/*myIcon(图片地址,new BMap图片的大小)*/
                            myIcon = new BMap.Icon(
                                ("https://xytvideo.oss-cn-beijing.aliyuncs.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20201218154034.png"),
                                new BMap.Size(35, 35)
                            );
                        }else if(basicList[item].riskLevel=="2"){
                            myIcon = new BMap.Icon(
                                ("https://xytvideo.oss-cn-beijing.aliyuncs.com/images/%E6%A9%99%E8%89%B2.png"),
                                new BMap.Size(35, 35)
                            );
                        }else if (basicList[item].riskLevel=="3"){
                            myIcon = new BMap.Icon(
                                ("https://xytvideo.oss-cn-beijing.aliyuncs.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20201218154039.png"),
                                new BMap.Size(35, 35)
                            );
                        }else if(basicList[item].riskLevel=="4"){
                            myIcon = new BMap.Icon(
                                ("https://xytvideo.oss-cn-beijing.aliyuncs.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20201218154050.png"),
                                new BMap.Size(35, 35)
                            );
                        }
                        var marker = new BMap.Marker(pt,{icon:myIcon});
                        map.addOverlay(marker);
                        var opts = {
                            width: 300,     // 信息窗口宽度
                            height: 120,     // 信息窗口高度
                            title: "<a href='#' οnclick='tzhuan()' style=\"font-size:16px;font-weight:bold\">" + basicList[item].businessName + "</a>", // 信息窗口标题
                            enableMessage: true, //设置允许信息窗发送短息
                            message: ""
                        }
                        var showInfo = "地址:" + basicList[i].businessAddress;
                        var infoWindow = new BMap.InfoWindow(showInfo, opts);  // 创建信息窗口对象
                        marker.addEventListener("click", function (e) {
                            //map.centerAndZoom(pt, 12);
                            marker.openInfoWindow(infoWindow, pt); //开启信息窗口
                        });
                        i++;
                    })(i);
                }
            }
        });
        map.setCurrentCity("长沙");           // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //设置地图颜色
        var mapStyle={
            //黑色
            /* style:"midnight"*/
        };
        map.setMapStyle(mapStyle);
        //加载城市控件
        var size = new BMap.Size(10, 50);
        map.addControl(new BMap.CityListControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            offset: size,
        }));
    }
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值