<!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