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);
})()
}
}
正文:
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()
})