地图:实现地图找房

百度地图：实现地图找房

baidu API 引⼊:

html:

<div id="mapContainer">div>

简单实现逻辑：

(function (win, $) {

class SearchMap {

constructor(options, sourceData, listener) {

this.map = undefined; //地图实例

this.point = undefined; //地图中⼼点

this.polygon = undefined;

this.options = options || {}; //参数选项

this.sourceData = sourceData; //原始数据

this.listener = listener; //地图缩放或平移的事件监听器

this.initMap();

}

initMap() {

let _this = this;

this.map = new ('mapContainer', { minZoom: 9, maxZoom: 18 });

this.point = new (this., this.);

this.AndZoom(this.point, 9);

this.ScrollWheelZoom(true);

this.addMarks();

this.ntListener("zoomend", function () {

var zoomLevel = _m(); //获取地图缩放级别

if (zoomLevel <= 10) {

_ks();

} else {

_Label();

}

});

}

// 根据⾏政区划绘制聚合点位

addMarks() {

// 添加marks时先清除之前的覆盖物

let _this = this;

let _map = this.map;

let _polygon = this.polygon;

_verlays();

// 模拟郑州市聚点数据

let clusterList = [

{ "name": "郑州市", "code": "410100000", "longitude": "113.451854", "latitude": "34.556306", "count": "445" },

{ "name": "开封市", "code": "410200000", "longitude": "114.356733", "latitude": "34.506238", "count": "377" },

{ "name": "洛阳市", "code": "410300000", "longitude": "112.134468", "latitude": "34.263041", "count": "370" },

{ "name": "平顶⼭市", "code": "410400000", "longitude": "112.992161", "latitude": "33.773999", "count": "300" },

{ "name": "安阳市", "code": "410500000", "longitude": "114.098163", "latitude": "36.106852", "count": "290" },

{ "name": "鹤壁市", "code": "410600000", "longitude": "114.208643", "latitude": "35.653125", "count": "245" },

{ "name": "新乡市", "code": "410700000", "longitude": "113.933677", "latitude": "35.31059", "count": "236" },

{ "name": "焦作市", "code": "410800000", "longitude": "113.050848", "latitude": "35.124706", "count": "210" },

{ "name": "濮阳市", "code": "410900000", "longitude": "115.169299", "latitude": "35.769421", "count": "225" },

{ "name": "许昌市", "code": "411000000", "longitude": "113.956834", "latitude": "34.043383", "count": "155" }

];

//为了提⾼百度地图性能，本篇例⼦点位全⽤label来加载点位

$.each(clusterList, function (index, data) {

// 添加经纬的中⼼点

let point = new (ude, de);

//⾃定义label样式

let template = `

let clusterLabel = new (template,

{

position: point, //label 在此处添加点位位置信息

offset: new (-46, -46)

});

le({

width: "92px", //宽

height: "92px", //⾼度

border: "0", //边

background: "rgba(17,164,60,.9)", //背景颜⾊

borderRadius: "50%",

cursor: "pointer"

});

le();

_rlay(clusterLabel);//添加点位

// 当⿏标悬停在label上时显⽰⾏政区划边界

ntListener("mouseover", function () {

le({ background: "rgba(255,102,0,.9)" }); //修改覆盖物背景颜⾊

var regionName = le();

_ndary(regionName);

});

// 当⿏标离开时在删除边界折线数据

ntListener("mouseout", function () {

le({ background: "rgba(17,164,60,.9)" }); //修改覆盖物背景颜⾊

if (n) {

var polyPathArray = new Array();

h(polyPathArray);

_Overlay(polygon);//清除折线数据

}

});

ntListener("click", function () {

_();

_Label();//获取所有点位数据

});

})

}

// 根据⾏政区划绘制边界

getBoundary(regionName) {

let _map = this.map;

let boundary = new ry();

(regionName, function (rs) {

//⾏政区域的点有多少个

if ( === 0) {

alert('未能获取当前输⼊⾏政区域');

return;

}

for (const itemBoundary of ries) {

if (!n) {

n = new n(itemBoundary, {

strokeWeight: 2,

strokeColor: "rgb(17,164,60)",

fillColor: "rgba(17,164,60, .1)"

}); //建⽴多边形覆盖物

_rlay(polygon); //添加覆盖物

} else {

h(itemBoundary);

_rlay(polygon); //添加覆盖物

}

MassClear();

}

});

}

//绘制详细楼盘点位信息

getAllLabel() {

let _map = this.map;

_verlays();

//模拟点位数据

var labelList = [

{ "name": "楼盘⼀", "code": "01", "longitude": "113.515919", "latitude": "34.799769", "price": "10000" },

{ "name": "楼盘⼆", "code": "02", "longitude": "113.509444", "latitude": "34.4475", "price": "999" },

{ "name": "楼盘三", "code": "03", "longitude": "113.68175", "latitude": "34.737633", "price": "888" },

{ "name": "楼盘四", "code": "04", "longitude": "113.280769", "latitude": "34.814961", "price": "777" }

];

$.each(labelList, function (index, data) {

let point = new (ude, de);

le({

height: "30px", //⾼度

border: "0", //边

backgroundColor: "rgba(17,164,60,.9)",

borderRadius: "4px",

cursor: "pointer"

});

le();

(houseLabel);

_rlay(houseLabel);

let lastHouseLabel = null;

//⿏标点击时打开新标签并关闭上⼀个标签内容

ntListener("mouseover", function () {

le({ background: "rgba(255,102,0,.9)" });

});

ntListener("mouseout", function () {

le({ background: "rgba(17,164,60,.9)" }); //修改覆盖物背景颜⾊

});

//⿏标点击时标签⼀直存在

// ntListener("click", function () {

// le({ background: "rgba(255,102,0,.9)" });

// });

});

//addViewLabel(labelData);//加载可视范围点

}

}

Map = SearchMap;

})(window, jQuery)

信息弹出层：

//信息窗⼝模板

var tpl="

var infoBox = new x(map, tpl, {

boxStyle: {

width: "160px",

minHeight: "50px",

marginBottom: "30px",

backgroundColor: "white"

},

closeIconMargin: "15px 10px 4px 4px",

closeIconUrl: "img/",

enableAutoPan: false,

align: INFOBOX_AT_TOP

});

//⿏标点击时打开新标签并关闭上⼀个标签内容

ntListener("mouseover", function () {

if (foBox) {

//判断上⼀个窗体是否存在，若存在则执⾏close

();