<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta name="viewport"
|
content="initial-scale=1.0, user-scalable=no, width=device-width" />
|
<title>项目列表视图</title>
|
<link rel="stylesheet"
|
href="http://cache.amap.com/lbs/static/main1119.css" />
|
<link href="../css/public.css" rel="stylesheet" />
|
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
|
<script type="text/javascript"
|
src="https://webapi.amap.com/maps?v=2.0&key=3627ed9deaac2622e26a7169f0c36b1b&plugin=AMap.Geocoder"></script>
|
<script src="../js/jquery-2.1.1.min.js"></script>
|
<script src="../js/public.js"></script>
|
<script src="../js/tools.js"></script>
|
<script src="../js/xhs_base64.js"></script>
|
</head>
|
|
<body>
|
<div id="container"></div>
|
|
<div class="search-box" id="search_box">
|
<input class="search-text"
|
id="search_text"
|
type="text"
|
placeholder="请输入详细地址"
|
onkeypress="keySearchAddress()" />
|
<input class="search-button"
|
id="search_button"
|
type="button"
|
onclick="searchAddress()" />
|
</div>
|
|
<script>
|
let map; //地图对象 使用 ToolBar时，地图对象需要定义位map 否则会报错
|
let _map; //地图对象
|
let _layer; //图层对象
|
let _callBackObj; //交互对象
|
let _allProjectList = []; //所有项目列表
|
let _selectedProjectOverlay = null; //选择的项目覆盖物
|
|
$(document).ready(function () {
|
try {
|
map = _map = new AMap.Map("container", {
|
viewMode: "2D", //默认使用 2D 模式
|
resizeEnable: true,
|
expandZoomRange: true,
|
zoom: 10,
|
zooms: [3, 20],
|
//center: [121.507845, 31.20351], //地图中心点 这是上海的点
|
});
|
|
//地图点击时取消选择
|
//_map.on('click', function (e) {
|
// if (_selectedProjectOverlay) {
|
// setCancelSelectProjectStyle();
|
// _callBackObj.cancelSelectProject();
|
// }
|
//});
|
|
//地图点击时关闭搜索面板
|
_map.on("click", function () {
|
if ($("#search_text").css("display") == "block") {
|
$("#search_text").hide();
|
}
|
});
|
|
//地图加载完成事件
|
_map.on("complete", function () {
|
//地图加载完成
|
_layer = new AMap.LabelsLayer({
|
zooms: [3, 20],
|
zIndex: 1000,
|
eventSupport: true, // 图层事件支持，LabelsLayer 默认开启
|
fitView: true,
|
collision: true, // 该层内标注是否避让
|
allowCollision: true, //不同标注层之间是否避让
|
});
|
_map.add(_layer);
|
_callBackObj = window.chrome.webview.hostObjects.callBackObj;
|
_callBackObj.LoadCompleted();
|
});
|
} catch (e) {
|
_callBackObj = window.chrome.webview.hostObjects.callBackObj;
|
_callBackObj.LoadFailed();
|
}
|
});
|
|
//设置项目列表
|
function setProjectList(allProjectList) {
|
if (_allProjectList.length > 0) {
|
_layer.clear();
|
}
|
if (isEmpty(allProjectList)) {
|
_allProjectList = [];
|
} else {
|
_allProjectList = allProjectList;
|
}
|
|
let labelMarkers = [];
|
_allProjectList.forEach(function (x) {
|
let labelMarker = new AMap.LabelMarker({
|
//name: x.Id, // 此属性非绘制文字内容，仅作为标识使用
|
position: [x.Point.X, x.Point.Y],
|
//zIndex: 1,
|
// 将第一步创建的 icon 对象传给 icon 属性
|
icon: {
|
type: "image", // 图标类型，现阶段只支持 image 类型
|
image: xhs_image_base64.project, // 图片 url
|
size: [32, 32], // 图片尺寸
|
anchor: "center", // 图片相对 position 的锚点，默认为 bottom-center
|
},
|
// 将第二步创建的 text 对象传给 text 属性
|
text: {
|
content: x.Name,
|
direction: "bottom", //文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
|
offset: [0, 0], //在 direction 基础上的偏移量
|
//文字样式
|
style: {
|
fontSize: 12, //字体大小
|
fillColor: "#22886f", //字体颜色
|
strokeColor: "#fff", //描边颜色
|
strokeWidth: 2, //描边宽度
|
},
|
},
|
});
|
labelMarker.objInfo = x;
|
labelMarker.on("click", function (e) {
|
//setSelectProjectStyle(e.target);
|
//_callBackObj.SelectProject(e.target.objInfo.Id);
|
});
|
labelMarkers.push(labelMarker);
|
});
|
if (labelMarkers.length > 0) {
|
_layer.add(labelMarkers);
|
}
|
|
_map.setFitView();
|
return true;
|
}
|
|
function initOverlayListener(overlay) {
|
const id = overlay.objInfo.Id
|
const objInfoNameEle = document.querySelector(".obj-info-name-" + id);
|
objInfoNameEle?.addEventListener("click", () => {
|
_callBackObj.JumpSimulation(overlay.objInfo.Id);
|
});
|
}
|
|
//设置选择项目样式
|
function setSelectProjectStyle(overlay) {
|
setCancelSelectProjectStyle();
|
let info = [];
|
info.push("<div className='input-card'>");
|
const id = overlay.objInfo.Id
|
info.push(
|
"<label class='obj-info-name-" + id + "' style=\"color: blue;cursor:pointer\">"
|
);
|
info.push(overlay.objInfo.Name);
|
info.push("</label>");
|
info.push("<p class='input-item'>编号：");
|
info.push(overlay.objInfo.NO);
|
info.push("</p>");
|
info.push("<p class='input-item'>客户名称：");
|
info.push(overlay.objInfo.Customer);
|
info.push("</p>");
|
info.push("</div>");
|
|
infoWindow = new AMap.InfoWindow({
|
anchor: "bottom-center",
|
content: info.join(""),
|
offset: new AMap.Pixel(0, -16),
|
});
|
|
infoWindow.open(_map, overlay.getPosition());
|
_selectedProjectOverlay = overlay;
|
_map.setFitView(overlay);
|
initOverlayListener(overlay);
|
}
|
function getAllOverlaysClick(overlay) {
|
console.log(overlay);
|
}
|
//设置取消选择样式
|
function setCancelSelectProjectStyle() {
|
if (_selectedProjectOverlay) {
|
_map.clearInfoWindow();
|
_selectedProjectOverlay = null;
|
}
|
}
|
|
//选择标记对象
|
function selectProject(projectId) {
|
if (isEmpty(projectId)) {
|
return;
|
}
|
if (isEmpty(_allProjectList)) {
|
_allProjectList = [];
|
}
|
|
let project = _allProjectList.find(function (x) {
|
return x.Id == projectId;
|
});
|
if (project) {
|
let allOverlays = _layer.getAllOverlays();
|
let overlay = allOverlays.find(function (x) {
|
return x.objInfo && x.objInfo.Id == projectId;
|
});
|
if (overlay) {
|
setSelectProjectStyle(overlay);
|
}
|
}
|
}
|
|
//取消选择项目
|
function cancelSelectProject() {
|
if (_selectedProjectOverlay) {
|
setCancelSelectProjectStyle();
|
}
|
}
|
|
//设置搜索面板的可见性
|
function setSearchPanelVisibility() {
|
document.getElementById("search_box").hidden =
|
!document.getElementById("search_box").hidden;
|
}
|
|
//根据详细地址查看地图
|
function locateByAddress(address) {
|
if (isEmpty(address)) {
|
return;
|
}
|
let geocoder = new AMap.Geocoder({});
|
//地理编码,返回地理编码结果
|
geocoder.getLocation(address, function (status, result) {
|
if (status === "complete" && result.info === "OK") {
|
let geocode = result.geocodes;
|
let lnglat = [
|
geocode[0].location.getLng(),
|
geocode[0].location.getLat(),
|
];
|
let marker = new AMap.Marker({ position: lnglat });
|
_map.setFitView(marker);
|
} else {
|
let error = {
|
Code: error_type.locate_address,
|
Message: "根据详细地址定位地图失败",
|
};
|
_callBackObj.HandingError(JSON.stringify(error));
|
}
|
});
|
}
|
|
//搜索地址
|
function searchAddress() {
|
if ($("#search_text").css("display") == "block") {
|
let address = $("#search_text").val();
|
if (!isEmpty(address)) {
|
locateByAddress(address);
|
}
|
$("#search_text").hide();
|
} else {
|
$("#search_text").show();
|
}
|
}
|
|
//enter搜索地址
|
function keySearchAddress() {
|
//已过时，还能用
|
if (event.keyCode == 13) {
|
searchAddress();
|
}
|
}
|
|
//根据点获取地址
|
getAddressByLnglat = function (lnglat, callback) {
|
let geocoder = new AMap.Geocoder({});
|
geocoder.getAddress(lnglat, function (status, result) {
|
if (status === "complete" && result.info === "OK") {
|
var address = result.regeocode.formattedAddress; //返回地址描述
|
callback(address);
|
} else {
|
callback(null);
|
}
|
});
|
};
|
</script>
|
</body>
|
</html>
|
