百度地图创建麻点及解决显示最同一个窗口信息问题

html:

<div id="allmap" style="width:100%;height:800px;" ></div>

js:


注:黑体为接口的数据名称,因为后端返回的地图经纬度是(36xxx,118xxx),所以后面获取数据时要颠倒数据

 //封装获取地图麻点方法
        function getMarker(data){
            var data_list = data.data_list                 //接口数据
            console.log(data_list,66666);
            map.clearOverlays();
            for(var i=0;i<data_list.length;i++){
                (function(){
                    var p0 = data_list[i].address_gps.split(",")[0];
                    var p1 = data_list[i].address_gps.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
                    var pt = new BMap.Point(p1, p0);//循环生成新的地图点
                    var marker = new BMap.Marker(pt); //按照地图点坐标生成标记
                    map.addOverlay(marker);
                    var label = new BMap.Label(data_list[i].price+"元" , { offset: new window.BMap.Size(-20, -10) });
                    marker.setLabel(label);
                    label.setStyle({
                        color : "#fff",
                        fontSize : "12px",
                        width:"60px",
                        height : "30px",
                        lineHeight : "30px",
                        background:"#c7000a",
                        fontFamily:"微软雅黑"
                    })
                    // 创建信息窗口
                    var opts ={
                        width:160, //信息窗口宽度
                        height:150, //信息窗口高度
                    }


                   var showInfo ="<img style='margin:4px' src='" + data_list[i].avatar_url + "' width='215' height='104'>" +"<p style='line-height:1.5;font-size:13px;'>" +data_list[i].title + "</br> 可租面积:" + data_list[i].acreage_range + "m²" +"</br></p>"


                    var infoWindow = new BMap.InfoWindow(showInfo,opts);
                    marker.addEventListener("click",function(e){
                        marker.openInfoWindow(infoWindow,pt);
                    });
                    map.addOverlay(marker);
                })()
            }
        }

 正文:

  var map = new BMap.Map("allmap");
        var point = new BMap.Point(118.734545,32.00937);//南京
        map.centerAndZoom(point, 13); //初始化地图,设置中心点坐标和地图级别。
        map.enableScrollWheelZoom(true);//启用滚轮放大缩小


        // 加载标注点
        function initMarker(){
            $.ajax({
                type:"post",
                url:"{:U('Makeup/Map/search')}",    //后端接口
                dataType:"json",
                timeout: 86000000,
                success:function(data){
                    getMarker(data);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                  if (textStatus == 'parsererror' || textStatus == 'timeout' || textStatus == 'error' || textStatus == 'notmodified' || textStatus == null) {
                  }
                }
            })
        }
        //调用
        $(function(){
           initMarker()
        })


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值