jquery 实现点击菜单实现高德地图定位点与数据显示联动效果
最编程
2024-10-16 15:33:22
...
/**
* @function getPosition
* @description 初始化处理省数据,用于定位Marker和targetName显示
* @param {string} adcode: 区域编码
*/
const getPosition = (adcode) => {
let str = "";
switch (adcode) {
case "110000":
str = "北京市_116.395825_39.941005";
break;
case "120000":
str = "天津市_117.210813_39.14393";
break;
case "130000":
str = "河北省_115.177813_38.206007";
break;
case "140000":
str = "山西省_112.564662_37.872049";
break;
case "150000":
str = "内蒙古_110.052771_41.34515";
break;
case "210000":
str = "辽宁省_123.004468_41.455972";
break;
case "220000":
str = "吉林省_126.346847_43.833111";
break;
case "230000":
str = "黑龙江省_128.664906_46.690662";
break;
case "310000":
str = "上海市_121.416372_31.45115";
break;
case "320000":
str = "江苏省_119.31908_32.642047";
break;
case "330000":
str = "浙江省_120.827658_30.180849";
break;
case "340000":
str = "安徽省_116.840281_31.83996";
break;
case "350000":
str = "福建省_118.680011_26.017147";
break;
case "360000":
str = "江西省_116.545924_28.190379";
break;
case "370000":
str = "山东省_118.900778_36.486773";
break;
case "410000":
str = "河南省_114.779784_34.986831";
break;
case "420000":
str = "湖北省_113.602357_30.892777";
break;
case "430000":
str = "湖南省_112.130573_27.929244";
break;
case "440000":
str = "广东省_114.083052_23.555889";
break;
case "450000":
str = "广西_109.152576_23.080123";
break;
case "460000":
str = "海南省_110.072441_19.494242";
break;
case "500000":
str = "重庆市_107.377359_29.631998";
break;
case "510000":
str = "四川省_103.182775_30.528033";
break;
case "520000":
str = "贵州省_106.199932_26.399788";
break;
case "530000":
str = "云南省_102.189321_24.66383";
break;
case "540000":
str = "*_92.365164_29.792605";
break;
case "610000":
str = "陕西省_108.334018_34.150637";
break;
case "620000":
str = "甘肃省_104.249818_35.756198";
break;
case "630000":
str = "青海省_100.975099_36.353776";
break;
case "640000":
str = "宁夏_107.119797_38.322051";
break;
case "650000":
str = "*_88.538527_43.616418";
break;
case "710000":
str = "*_121.359304_24.461909";
break;
case "810000":
str = "香港_115.067429_22.630108";
break;
case "820000":
str = "澳门_113.338083_22.151047";
break;
default:
str = "北京市_116.395825_39.941005";
break;
}
const position = str.split("_");
return {
targetName: position[0],
longitude: position[1],
latitude: position[2],
};
};
/**
* @function initialize
* @description 初始化渲染地图
*/
let map = undefined;
const initialize = () => {
map = new AMap.Map("mapContainer", {
zoom: 4,
zooms: [4, 20],
center: [116.404, 39.915],
});
map.plugin(
["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.HawkEye"],
() => {
map.addControl(new AMap.Scale()); //比例尺
map.addControl(
new AMap.ToolBar({
position: "RT",
})
); //工具条
map.addControl(new AMap.ControlBar()); //工具条方向盘
map.addControl(new AMap.HawkEye()); //鹰眼
}
);
};
/**
* @function drawMapText
* @description 主要用于自定义文本点标记Marker
* @param {string} adlist:区域列表
*/
const drawMapText = (adlist) => {
const { list = [] } = adlist;
list.forEach((item) => {
const position = getPosition(item.province_code);
const { targetName, longitude, latitude } = position;
const mapText = new AMap.Text({
text: targetName,
position: [longitude, latitude],
topWhenClick: "true",
anchor: "center",
cursor: "pointer",
style: {
width: "52px",
height: "18px",
padding: "0",
textAlign: "center",
lineHeight: "18px",
fontSize: "12px",
fontWeight: "700",
color: "#fff",
border: "none",
borderRadius: "5px",
backgroundColor: "#f5222d",
whiteSpace: "nowrap",
MozUserSelect: "none",
},
});
mapText.on("mouseover", () => {
mapText.setStyle({
backgroundColor: "#096dd9",
});
});
mapText.on("mouseout", () => {
mapText.setStyle({
backgroundColor: "#f5222d",
});
});
mapText.on("click", () => {
drawProvinceInfo(item.province_code, position);
});
mapText.add(map);
});
};
/**
* @function drawProvinceInfo
* @description 点击自定义Marker省份按钮,渲染信息窗体
* @param {string} adcode:区域编码
* @param {string} targetName:当前省名称
* @param {string} longitude:当前经度
* @param {string} latitude:当前维度
*/
const drawProvinceInfo = (adcode, { targetName, longitude, latitude }) => {
$ajax("getProvinceInfo", ({ data: { domContent = "", count = 0 } }) => {
const content = `
<div class="infoContainer">
<div class="infoTitle">
<h2 id="h0">${targetName}</h2>
<span>${targetName}范围内共<b style="color:#f5222d;">${count}</b>种水果</span>
</div>
<div class="infoContent">
<div class="infoContentTitle">水果种类</div>
<ul class="infoContentBox">${domContent}</ul>
</div>
<div class="infoBottom">
<button onclick="drawProvinceDistribute('${adcode}')">${targetName}市场分布</button>
</div>
</div>`;
const infoWindow = new AMap.InfoWindow({
isCustom: false,
closeWhenClickMap: true,
content,
offset: new AMap.Pixel(0, -10),
});
infoWindow.open(map, [longitude, latitude]);
});
};
/**
* @function drawProvinceDistribute
* @description 点击市场分布按钮,查看全部市场分部与渲染区域边界
* @param {string} adcode:区域编码
*/
const drawProvinceDistribute = (adcode) => {
const { targetName, longitude, latitude } = getPosition(adcode);
// 清除地图图层等操作
map.setZoomAndCenter(6, [longitude, latitude], true);
map.setZooms([5, 20]);
// 绘制边界
drawBounds(adcode);
// 获取市场数据
getMenu(targetName);
};
/**
* @function drawBounds
* @description 绘制行政省边界区域
* @param {string} keyword:行政区code
*/
let district = null;
let polygon = null;
const drawBounds = (keyword) => {
map.plugin("AMap.DistrictSearch", () => {
if (!district) {
//实例化DistrictSearch
district = new AMap.DistrictSearch({
subdistrict: 0,
extensions: "all",
level: "province",
});
}
// 行政区查询
district.search(keyword, (status, result) => {
if (polygon) {
map.remove(polygon); //清除上次结果
polygon = null;
}
if (status !== "complete") {
return;
}
const bounds = result.districtList[0].boundaries;
if (bounds) {
//生成行政区划polygon
for (let i = 0; i < bounds.length; i += 1) {
//构造MultiPolygon的path
bounds[i] = [bounds[i]];
}
polygon = new AMap.Polygon({
strokeWeight: 1,
path: bounds,
fillOpacity: 0.4,
fillColor: "#80d8ff",
strokeColor: "#0091ea",
});
map.add(polygon);
// 视口自适应
map.setFitView(polygon, true, [60, 60, 60, 60]);
}
});
});
};
/**
* @Start 市场分布
* --------------------------------------------------------------------
*/
/**
* @function getMenu
* @description 获取市场列表数据并渲染在左侧菜单区域
* @param {string} urlFlag: 区分url标记
* @param {string} title:行业标题
* @param {string} adcode:区域编码
*/
const getMenu = (title) => {
map.clearMap();
// 请求菜单数据
$ajax("getLeftMenu", ({ list: menus = [] }) => {
let menuHTML = `
<div class="menuTitle">
<a rel="nofollow" href="javascript:void(0)" onclick="location.reload()">所有市场</a>
>
<span>所选：</span>
<span class="menuSelected"> ${title}</span>
</div>
<div>
`;
menus.forEach((menu, idx) => {
menuHTML += `
<div class="menuBox" sort="${idx + 1}">
<div class="icon">${idx + 1}</div>
<div class="menuContent">
<div class="menuName">${menu.name}</div>
<div class="menuInfo">
<p>经营范围：${menu.businessScope}</p>
<p>供求信息：${menu.supplyNum}条</p>
<p>现货信息：${menu.stockNum}条</p>
</div>
</div>
</div>
`;
// 地图添加市场标记
drawMapMarker(menu, idx + 1 + "");
});
document.getElementById("menuContainer").innerHTML = menuHTML + "</div>";
// 绑定事件
bindMenuEvent(menus);
});
};
/**
* @function bindMenuEvent
* @description 左侧菜单元素绑定移入移出和点击事件
*/
const bindMenuEvent = (menus) => {
jQuery("div.menuBox").hover(
function () {
$(this).children("div.icon").css("background-color", "#fff");
$(this).children("div.icon").css("color", "#2e3243");
const sort = $(this).attr("sort");
mapMarkHighlight(sort, true);
},
function () {
$(this).children("div.icon").css("background-color", "#333333");
$(this).children("div.icon").css("color", "#fff");
const sort = $(this).attr("sort");
mapMarkHighlight(sort);
}
);
jQuery("div.menuBox").click(function () {
$(this).children("div.icon").css("background-color", "#fff");
$(this).children("div.icon").css("color", "#2e3243");
const sort = $(this).attr("sort");
drawMarketInfo(menus[sort - 1]);
});
};
/**
* @function drawMapMarker
* @description 为地图上添加市场对应的Marker标记
* @param {object} menu:市场数据
* @param {string} idx:索引
*/
const drawMapMarker = (menu, idx) => {
const longitude = menu.longitude * 1;
const latitude = menu.latitude * 1;
const mapMarker = new AMap.Marker({
map: map,
size