<!DOCTYPE html>
<html>
<head>
<meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
<meta content=
"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name=
"viewport" />
<meta content=
"yes" name=
"apple-mobile-web-app-capable" />
<meta content=
"black" name=
"apple-mobile-web-app-status-bar-style" />
<meta content=
"telephone=no" name=
"format-detection" />
<title>标记点击事件</title>
<style type=
"text/css">
*
{
padding: 0;
margin: 0;
}
.mapContainer{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
#container {
/*地图(容器)显示大小*/
position: relative;
width: 100%
;
height: 100%
;
}
</style>
<script charset=
"utf-8" src=
"https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head>
<body>
<div
class=
"mapContainer">
<div id=
"container"></div>
</div>
<script>
//初始化标记数据
var dataSource=[{
"id":
0,
"fullname":
"邵阳县",
"lat":
26.99078,
"lng":
111.27382},{
"id":
1,
"fullname":
"隆回县",
"lat":
27.11402,
"lng":
111.03249},{
"id":
2,
"fullname":
"洞口县",
"lat":
27.06038,
"lng":
110.57583},{
"id":
3,
"fullname":
"新宁县",
"lat":
26.43346,
"lng":
110.85674},{
"id":
4,
"fullname":
"城步苗族自治县",
"lat":
26.39156,
"lng":
110.32285},{
"id":
5,
"fullname":
"桑植县",
"lat":
29.39971,
"lng":
110.16428},{
"id":
6,
"fullname":
"沅陵县",
"lat":
28.45277,
"lng":
110.39388},{
"id":
7,
"fullname":
"溆浦县",
"lat":
27.90834,
"lng":
110.59486},{
"id":
8,
"fullname":
"麻阳苗族自治县",
"lat":
27.86555,
"lng":
109.80256},{
"id":
9,
"fullname":
"通道侗族自治县",
"lat":
26.15794,
"lng":
109.78449},{
"id":
10,
"fullname":
"泸溪县",
"lat":
28.21639,
"lng":
110.21965},{
"id":
11,
"fullname":
"凤凰县",
"lat":
27.94843,
"lng":
109.59832},{
"id":
12,
"fullname":
"保靖县",
"lat":
28.70001,
"lng":
109.66054},{
"id":
13,
"fullname":
"古丈县",
"lat":
28.61711,
"lng":
109.95085},{
"id":
14,
"fullname":
"永顺县",
"lat":
29.00515,
"lng":
109.84807},{
"id":
15,
"fullname":
"龙山县",
"lat":
29.4579,
"lng":
109.44387},{
"id":
16,
"fullname":
"花垣县",
"lat":
28.57211,
"lng":
109.48224},{
"id":
17,
"fullname":
"新化县",
"lat":
27.72663,
"lng":
111.32743},{
"id":
18,
"fullname":
"涟源市",
"lat":
27.69271,
"lng":
111.66446}]
//初始化地图
var init =
function() {
var center =
new qq.maps.LatLng(
27.56974,
110.0016);
var map =
new qq.maps.Map(document.getElementById(
'container'),{
center: center,//设置地图中心点坐标
zoom:
8,
//设置地图缩放级别
pitch:
43.5,
//设置俯仰角
rotation:
45 //设置地图旋转角度
});
//循环创建标记
for (let i =
0; i < dataSource.length; i++
) {
//创建标记
let markPosition=
new qq.maps.LatLng(dataSource[i].lat,dataSource[i].lng);
var marker =
new qq.maps.Marker({
position: markPosition,
map: map
});
//标记点击居中
qq.maps.
event.addListener(marker,
'click', function(
event) {
// console.log(event.latLng.getLat());//获取当前坐标点的纬度
// console.log(event.latLng.getLng());//获取当前坐标点的经度
var ne =
new qq.maps.LatLng((parseFloat(
event.latLng.getLat())+
0.04).toFixed(
6),(parseFloat(
event.latLng.getLng())+
0.04).toFixed(
6));
//东北角坐标
var sw =
new qq.maps.LatLng((parseFloat(
event.latLng.getLat())-
0.04).toFixed(
6),(parseFloat(
event.latLng.getLng())-
0.04).toFixed(
6));
//西南角坐标
var latLngBounds =
new qq.maps.LatLngBounds(sw, ne)
map.fitBounds(latLngBounds); //根据指定的范围调整地图视野
})
//添加到提示窗
var info =
new qq.maps.InfoWindow({
map: map,
position:markPosition,
content:"<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
info.open();
}
}
window.onload=
function(){
init()
}
</script>
</body>
</html>
ps:点击Marker试图区自动居中
转载于:https://www.cnblogs.com/Jayeblog/p/11534381.html
