百度地图多个描点

    xiaoxiao2026-08-16  3

    有2种写法:var map = new BMap.Map("mapBox");   

    第一种:

     //存放点信息     var markerArr = [                     { title: "名称:广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" },                     { title: "名称:港航局三公司", point: "116.4,39.9", address: "港航局三公司北京地铁14号线04合同段", tel: "123456" }                 ];     //描点     for (var i = 0; i < markerArr.length; i++) {         var p0 = markerArr[i].point.split(",")[0];         var p1 = markerArr[i].point.split(",")[1];         var maker = addMarker(new window.BMap.Point(p0, p1), i);         addInfoWindow(maker, markerArr[i], i);     }     // 添加标注       function addMarker(point, index) {         var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",                         new BMap.Size(23, 25), {                             offset: new BMap.Size(10, 25),                             imageOffset: new BMap.Size(0, 0 - index * 25)                         });         var marker = new BMap.Marker(point, { icon: myIcon });         map.addOverlay(marker);         return marker;     }     // 添加信息窗口       function addInfoWindow(marker, poi) {         //pop弹窗标题           var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';         //pop弹窗信息           var html = [];         html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif;backgroundcolor:#6498ce;"><tbody>');         html.push('<tr>');         html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:</td>');         html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' </td>');         html.push('</tr>');         html.push('</tbody></table>');         var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });         var openInfoWinFun = function () {             marker.openInfoWindow(infoWindow);         };         marker.addEventListener("mouseover", openInfoWinFun);         return openInfoWinFun;     }

    第二种:

    特别要注意给点加鼠标移上去的事件,如果去掉了,那么永远就是最后一个点。循环绑定 mouseover 的时候 info[j] 他就直接绑定的 info[j],而不是我们想象中的 info[0] info[1] 之类的 它只有在 mouseover 事件触发的时候再去找 j 的值,所以都是最后一个。

    //存放点信息     var markerArr = [                     { title: "名称:广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" },                     { title: "名称:港航局三公司", point: "116.4,39.9", address: "港航局三公司北京地铁14号线04合同段", tel: "123456" }                 ];

    var point = new Array(); //存放标注点经纬信息的数组       var marker = new Array(); //存放标注点对象的数组       var info = new Array(); //存放提示信息窗口对象的数组       for (var i = 0; i < markerArr.length; i++) {         var p0 = markerArr[i].point.split(",")[0]; //           var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来           point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点           marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记           map.addOverlay(marker[i]);         //marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画           //给标点加上白色提示,不能删除         //        var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });         //        marker[i].setLabel(label);         info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>地址:" + markerArr[i].address + "</br> 电话:" + markerArr[i].tel + "</br></p>"); // 创建信息窗口对象       }     for (var j = 0; j < marker.length; j++) {         !function (j) {             marker[j].addEventListener("mouseover", function () {                 this.openInfoWindow(info[j]);             });

    marker[j].addEventListener("onmouseout", function () {                 this.closeInfoWindow(info[j]);             });         } (j);     }

    转载请注明原文地址: https://ju.6miu.com/read-1311227.html
    最新回复(0)