119 lines
4.0 KiB
HTML
119 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Document</title>
|
|
<script
|
|
src="http://api.tianditu.gov.cn/api?v=4.0&tk=9b4d8b15bdf9c3cec8d6f2945afc9c18"
|
|
type="text/javascript"
|
|
></script>
|
|
<script
|
|
src="http://api.tianditu.gov.cn/staticimage? center=116.40,39.93&width=500&height=500&zoom=12&layers=vec_c,cva_c &markers=116.34867,39.94593|116.42626,39.94731|116.4551,39.90267 |116.43381,39.86766|116.34249,39.87178|116.32807,39.90748&tk=9b4d8b15bdf9c3cec8d6f2945afc9c18"
|
|
type="text/javascript"
|
|
></script>
|
|
|
|
<script>
|
|
var map;
|
|
var zoom = 12,
|
|
marker;
|
|
// function addMapClick() {
|
|
// removeMapClick();
|
|
// map.addEventListener("click", MapClick);
|
|
// }
|
|
|
|
// function removeMapClick() {
|
|
// map.removeEventListener("click", MapClick);
|
|
// }
|
|
|
|
// function MapClick(e) {
|
|
// alert(e.lnglat.getLng() + "," + e.lnglat.getLat());
|
|
// }
|
|
function addMarkerClick() {
|
|
//移除标注的点击事件，防止多次注册
|
|
removeMarkerClick();
|
|
//注册标注的点击事件
|
|
marker.addEventListener("click", MarkerClick);
|
|
}
|
|
|
|
function removeMarkerClick() {
|
|
//移除标注的点击事件
|
|
marker.removeEventListener("click", MarkerClick);
|
|
}
|
|
|
|
function MarkerClick(e) {
|
|
alert(e.lnglat.getLng() + "," + e.lnglat.getLat());
|
|
window.location.href = "detail.html";
|
|
}
|
|
function onLoad() {
|
|
// map = new T.Map("mapDiv");
|
|
// map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
|
|
// //创建标注对象
|
|
// marker = new T.Marker(new T.LngLat(116.411794, 39.9068));
|
|
// //向地图上添加标注
|
|
// map.addOverLay(marker);
|
|
|
|
// addMarkerClick();
|
|
map = new T.Map("mapDiv", {
|
|
attributionControl: false,
|
|
inertia: false,
|
|
});
|
|
map.centerAndZoom(new T.LngLat(116.40969, 37.43997405227057), zoom);
|
|
var arrayObj = new Array();
|
|
for (var i = 0; i < 500; i++) {
|
|
marker = new T.Marker(
|
|
new T.LngLat(Math.random() * 40 + 85, Math.random() * 30 + 21),
|
|
{ title: i }
|
|
);
|
|
arrayObj.push(marker);
|
|
addMarkerClick();
|
|
}
|
|
var markers = new T.MarkerClusterer(map, { markers: arrayObj });
|
|
|
|
// var latlng = new T.LngLat(116.411794, 39.9068);
|
|
// var label = new T.Label({
|
|
// text: "天地图：<a href='https://www.tianditu.gov.cn' target='_blank'>https://www.tianditu.gov.cn </a>",
|
|
// position: latlng,
|
|
// offset: new T.Point(-100, -50),
|
|
// });
|
|
// //创建地图文本对象
|
|
// map.addOverLay(label);
|
|
}
|
|
// function onLoad() {
|
|
// map = new T.Map('mapDiv', {
|
|
// attributionControl: false,
|
|
// inertia: false
|
|
// });
|
|
// map.centerAndZoom(new T.LngLat(116.40969, 37.43997405227057), zoom);
|
|
|
|
// var arrayObj = new Array();
|
|
// for (var i = 0; i < 500; i++) {
|
|
// var marker = new T.Marker(new T.LngLat(Math.random() * 40 + 85, Math.random() * 30 + 21), {title: i});
|
|
// arrayObj.push(marker);
|
|
// }
|
|
// var markers = new T.MarkerClusterer(map, {markers: arrayObj});
|
|
// }
|
|
</script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.navTitle {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onLoad="onLoad()">
|
|
<div class="navTitle">
|
|
<div class="navBack"><button onclick="history.back()">返回</button></div>
|
|
<div class="title">地图版</div>
|
|
</div>
|
|
<div
|
|
id="mapDiv"
|
|
style="position: absolute; top: 60px; width: 100%; height: 100%"
|
|
></div>
|
|
</body>
|
|
</html>
|