<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>gaode</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style type="text/css">
.box{
width: 800px;
height:500px;
}
</style>
</head>
<body>
<div id="main1" class="box"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=472fec026a2a15294548bd982a264dfb"></script>
<!-- <script type="text/javascript" src="https://webapi.amap.com/loader.js"></script> -->
<script>
/*
AMapLoader.load({
key: "472fec026a2a15294548bd982a264dfb", //申请好的Web端开发者 Key，调用 load 时必填
version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
}).then((AMap) => {
const map = new AMap.Map("main1");
}).catch((e) => {
console.error(e); //加载错误提示
});
*/
//参考手册
//https://lbs.amap.com/api/javascript-api-v2/documentation#maptype
//地图api
//https://lbs.amap.com/api/javascript-api-v2/summary
//获取点的经纬度
//https://lbs.amap.com/demo/javascript-api-v2/example/axis/transformate-between-coordinates-of-lnglat-and-map-container
let defaultCenter1 = [117.19056610000000, 32.10187128000000];
let defaultCenter2 = [116.93411749000000,33.50745124000000]
let companyCoordinate = [
{group_name: '安徽省', position: '["117.30125800000000","31.85261300000000"]', id: '1915229618768494594'},
{group_name: '合肥公司', position: '["117.19056610000000","32.10187128000000"]', id: '1915229618768494121'},
{group_name: '安徽钱公司', position: '["116.92828100318360","33.50805205481935"]', id: '1915229618768494518'}
]
let companyUuid = ''
let markers = [];
let boundariesLayers = [];
let initAMap = () => {
AMap.plugin(
[
"AMap.GeoJSON",
"AMap.Marker",
"AMap.Icon",
"AMap.Text",
"AMap.Pixel",
"AMap.TileLayer",
"AMap.LayerGroup",
"AMap.MapType",
],
async () => {
map = new AMap.Map("main1", {
resizeEnable: true,
center: [117.282957, 31.86166],
zoom: 12,
zooms:[3,16.7],
viewMode: "3D", // 启用3D视图
terrain: true, // 启用地形图
});
map?.addControl(new AMap.MapType({
defaultType: 0,// 1 默认先显示卫星图
})); // 实现默认图层与卫星图,实时交通图层之间切换
map?.setZoom(16);
map?.setCenter(defaultCenter1);
initText("", null);
//标记点函数自定义
await handleMarker(companyCoordinate,companyUuid); // 等待 marker 初始化完
await updateMap('anhui');
if (companyUuid) {
companyChange(companyUuid); // 确保 markers 已填充完再选中
}
//划线区域
var path1 = [
[117.191826,32.101916],
[117.190782,32.102949],
[117.190015,32.103918],
[117.188155,32.103908],
[117.187815,32.103599],
[117.187828,32.100617],
[117.189927,32.100627],
[117.191826,32.101916],
]
var path2 = [
[116.924803,33.503433],
[116.928038,33.502638],
[116.928404,33.50359],
[116.932782,33.502460],
[116.93384,33.506322],
[116.932503,33.506600],
[116.934002,33.511185],
[116.935101,33.511003],
[116.935913,33.514129],
[116.929562,33.515426],
[116.926931,33.508007],
[116.924248,33.508609],
[116.922996,33.504904],
[116.925163,33.504371],
[116.924803,33.503433],
]
var polygon1 = new AMap.Polygon({
path: path1,
strokeColor: "#ffd364",
strokeWeight: 4,
strokeOpacity: 1,
fillOpacity: 0.0,
fillColor: '#1791fc',
zIndex: 50,
bubble: true,
})
map.add([polygon1])
}
);
};
//更新地图展示区域
const updateMap = async (mapName) => {
try {
mapJson = await getMapJson(mapName);
getData(mapJson);
} catch (error) {
console.error("地图加载失败，使用默认地图", error);
const defaultMap = await getMapJson("anhui");
getData(defaultMap);
}
};
//获取地区GeoJSON数据
const getMapJson = async (mapName) => {
try {
const mapJson = await import(`./${mapName}.json`);
return mapJson.default || mapJson;
} catch (error) {
console.error(`Failed to load map JSON for: ${mapName}`, error);
return null; // 返回 null 或进行其他处理
}
};
const getData = async (data) => {
clearBoundaries();
boundariesLayer = new AMap.GeoJSON({
geoJSON: data,
zoomToBounds: true,
getPolygon: function (geojson, lnglats) {
return new AMap.Polygon({
path: lnglats,
fillOpacity: 0.35, // 面积越大透明度越高
strokeColor: "#078FFF",
strokeWeight: 1,
fillColor: "#70BEFF", //"#70BEFF",
});
},
});
if (map) {
map.add(boundariesLayer);
}
boundariesLayers.push(boundariesLayer);
};
const initText = (textContent, position) => {
// 创建纯文本标记
text = new AMap.Text({
text: textContent,
// anchor: "center", // 设置文本标记锚点
cursor: "default",
offset: new AMap.Pixel(15, -35),
style: {
padding: "8px 10px",
"border-radius": "8px",
"background-color": "rgba(255, 112, 72, 0.85)",
"border-width": 0,
"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
"text-align": "center",
"font-size": "18px",
color: "rgba(255, 255, 255, 1)",
zIndex: 999,
},
position: position,
});
text.setMap(map);
};
const createIcon = (iconUrl, width, height) => {
return new AMap.Icon({
size: new AMap.Size(width, height), // 图标大小
image: iconUrl, // 图标图片地址
imageSize: new AMap.Size(width, height), // 图标所用图片大小
});
};
// marker点指标
//todo 标记点待通过接口获取
const handleMarker = (coordinate, uuid) => {
return new Promise((resolve) => {
const targetIds = [
"1915229618768494594",
"1915229618768494121",
"1915229618768494518",
];
const filtered = coordinate.filter(
(item) => targetIds.includes(item.id) && item.position != null
);
// const unselectedIcon = createIcon("/image/unselect.svg", 32, 36);
// const selectedIcon = createIcon("/image/select.svg", 64, 70);
let pending = filtered.length;
if (pending === 0) resolve(); // 没有坐标直接 resolve
filtered.forEach((item) => {
const marker = new AMap.Marker({
position: JSON.parse(item.position),
// icon: unselectedIcon,
offset: new AMap.Pixel(-13, -30),
extData: {
name: item.group_name,
cityName: item.area,
cityCenter: JSON.parse(item.position),
uuid: item.id,
},
});
marker.on("click", (e) => {
clearBoundaries();
clearMarkers();
const extData = e.target._opts.extData;
const route = companyRouteMap[extData.uuid];
if (route) {
router.push(route);
} else {
console.warn(`无效的公司 ID：${extData.uuid}`);
}
const cityCenter = extData.cityCenter;
const companyName = extData.name;
const cityValue = findIdByName(companyName, companyData.value);
// showBackButton.value = true;
companyChange(cityValue);
const currentMarker = e.target;
// currentMarker.setIcon(selectedIcon);
currentMarker.setClickable(false);
currentMarker.setCursor("default");
selectValue.value = cityValue;
map?.setZoom(9);
map?.setCenter(cityCenter);
});
map?.add(marker);
markers.push(marker);
pending--;
if (pending === 0) {
resolve(); // 全部 marker 添加完，触发回调
}
});
});
};
const clearBoundaries = () => {
boundariesLayers.forEach((layer) => {
map?.remove(layer);
});
boundariesLayers = [];
};
initAMap()
</script>
</body>
</html>
浙公网安备 33010602011771号