<!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>Hello world!</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>
</head>
<!-- 页面载入后，调用init函数 -->
<body>
<!-- 定义地图显示容器 -->
<div
class=
"mapContainer">
<div id=
"container"></div>
</div>
<!--引入Javascript API GL，参数说明参见下文-->
<script src=
"https://map.qq.com/api/gljs?v=1.exp&key=P3YBZ-MKDHX-XJU4P-7OEMU-X6Z25-EEBPH"></script>
<script>
//地图初始化函数，本例取名为init，开发者可根据实际情况定义
function initMap() {
//定义地图中心点坐标
//怀化市
// "lat": 27.56974,
// "lng": 110.0016
var center =
new TMap.LatLng(
27.56974,
110.0016)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map =
new TMap.Map(document.getElementById(
'container'), {
center: center,//设置地图中心点坐标
zoom:
8.5,
//设置地图缩放级别
pitch:
43.5,
//设置俯仰角
rotation:
45 //设置地图旋转角度
});
//初始化marker
var marker =
new TMap.MultiMarker({
id: "marker-layer",
//图层id
map: map,
styles: { //点标注的相关样式
"marker":
new TMap.MarkerStyle({
"width":
25,
"height":
35,
"anchor": { x:
16, y:
32 },
"src":
"./imgtest/markIcon.png"
})
},
geometries: [{ //点标注数据数组
//邵阳县
// "lat": 26.99078,
// "lng": 111.27382
"id":
"1",
"styleId":
"marker",
"position":
new TMap.LatLng(
26.99078,
111.27382),
"properties": {
"title":
"marker"
}
},{
//隆回县
// "lat": 27.11402,
// "lng": 111.03249
"id":
"2",
"styleId":
"marker",
"position":
new TMap.LatLng(
27.11402,
111.03249),
"properties": {
"title":
"marker"
}
},{
//洞口县
// "lat": 27.06038,
// "lng": 110.57583
"id":
"3",
"styleId":
"marker",
"position":
new TMap.LatLng(
27.06038,
110.57583),
"properties": {
"title":
"marker"
}
},{
//新宁县
// "lat": 26.43346,
// "lng": 110.85674
"id":
"4",
"styleId":
"marker",
"position":
new TMap.LatLng(
26.43346,
110.85674),
"properties": {
"title":
"marker"
}
},{
// "城步苗族自治县",
// "lat": 26.39156,
// "lng": 110.32285
"id":
"5",
"styleId":
"marker",
"position":
new TMap.LatLng(
26.39156,
110.32285),
"properties": {
"title":
"marker"
}
},{
// "桑植县"
// "lat": 29.39971,
// "lng": 110.16428
"id":
"6",
"styleId":
"marker",
"position":
new TMap.LatLng(
29.39971,
110.16428),
"properties": {
"title":
"marker"
}
},{
// "沅陵县",
// "lat": 28.45277,
// "lng": 110.39388
"id":
"7",
"styleId":
"marker",
"position":
new TMap.LatLng(
28.45277,
110.39388),
"properties": {
"title":
"marker"
}
},{
// "溆浦县"
// "lat": 27.90834,
// "lng": 110.59486
"id":
"8",
"styleId":
"marker",
"position":
new TMap.LatLng(
27.90834,
110.59486),
"properties": {
"title":
"marker"
}
},{
// "麻阳苗族自治县"
//"lat": 27.86555,
// "lng": 109.80256
"id":
"9",
"styleId":
"marker",
"position":
new TMap.LatLng(
27.86555,
109.80256),
"properties": {
"title":
"marker"
}
},{
// "通道侗族自治县"
// "lat": 26.15794,
// "lng": 109.78449
"id":
"10",
"styleId":
"marker",
"position":
new TMap.LatLng(
26.15794,
109.78449),
"properties": {
"title":
"marker"
}
},{
// "fullname": "泸溪县"
// "lat": 28.21639,
// "lng": 110.21965
"id":
"11",
"styleId":
"marker",
"position":
new TMap.LatLng(
28.21639,
110.21965),
"properties": {
"title":
"marker"
}
},{
// "fullname": "凤凰县"
// "lat": 27.94843,
// "lng": 109.59832
"id":
"12",
"styleId":
"marker",
"position":
new TMap.LatLng(
27.94843,
109.59832),
"properties": {
"title":
"marker"
}
},{
// "fullname": "保靖县"
// "lat": 28.70001,
// "lng": 109.66054
"id":
"13",
"styleId":
"marker",
"position":
new TMap.LatLng(
28.70001,
109.66054),
"properties": {
"title":
"marker"
}
},{
// "fullname": "古丈县"
// "lat": 28.61711,
// "lng": 109.95085
"id":
"14",
"styleId":
"marker",
"position":
new TMap.LatLng(
28.61711,
109.95085),
"properties": {
"title":
"marker"
}
},{
// "fullname": "永顺县"
// "lat": 29.00515,
// "lng": 109.84807
"id":
"15",
"styleId":
"marker",
"position":
new TMap.LatLng(
29.00515,
109.84807),
"properties": {
"title":
"marker"
}
},{
// "fullname": "龙山县"
// "lat": 29.4579,
// "lng": 109.44387
"id":
"16",
"styleId":
"marker",
"position":
new TMap.LatLng(
29.4579,
109.44387),
"properties": {
"title":
"marker"
}
},{
// "fullname": "花垣县"
// "lat": 28.57211,
// "lng": 109.48224
"id":
"17",
"styleId":
"marker",
"position":
new TMap.LatLng(
28.57211,
109.48224),
"properties": {
"title":
"marker"
}
},{
// "fullname": "新化县"
// "lat": 27.72663,
// "lng": 111.32743
"id":
"18",
"styleId":
"marker",
"position":
new TMap.LatLng(
27.72663,
111.32743),
"properties": {
"title":
"marker"
}
},{
// "fullname": "涟源市"
// "lat": 27.69271,
// "lng": 111.66446
"id":
"19",
"styleId":
"marker",
"position":
new TMap.LatLng(
27.69271,
111.66446),
"properties": {
"title":
"marker"
}
}]
});
//标记点击事件
marker.on(
"click", function (evt) {
var markCenter = evt.geometry.position;
//获取标记中心点坐标
//设置infoWindow
//infoWindow.open(); //打开信息窗
//infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
//infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容
console.log(evt.geometry.position.toString());
// console.log(markCenter.getLat().toFixed(5))
// console.log((parseFloat(markCenter.getLat().toFixed(5))+0.02).toFixed(5));
// console.log(markCenter.getLng().toFixed(6))
// console.log((parseFloat(markCenter.getLng().toFixed(6))+0.02).toFixed(6));
var ne =
new TMap.LatLng((parseFloat(markCenter.getLat().toFixed(
6))+
0.04).toFixed(
6),(parseFloat(markCenter.getLng().toFixed(
6))+
0.04).toFixed(
6));
//东北角坐标
var sw =
new TMap.LatLng((parseFloat(markCenter.getLat().toFixed(
6))-
0.04).toFixed(
6),(parseFloat(markCenter.getLng().toFixed(
6))-
0.04).toFixed(
6));
//西南角坐标
// console.log(ne);
// console.log(sw);
var latLngBounds =
new TMap.LatLngBounds(sw, ne)
map.fitBounds(latLngBounds); //根据指定的范围调整地图视野
})
//初始化infoWindow
//设置infoWindow
var infoWindow1 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
26.99078,
111.27382),
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/1.png' width='50'><p>特产名称</p></a>",
offset: { x: 0, y: -
8 }
//设置信息窗相对position偏移像素，为了使其显示在Marker的上方
});
var infoWindow2 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
27.11402,
111.03249),
offset: { x: 0, y: -
8 },
//设置信息窗相对position偏移像素，为了使其显示在Marker的上方
content:
"<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow3 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
27.06038,
110.57583),
offset: { x: 0, y: -
8 },
//设置信息窗相对position偏移像素，为了使其显示在Marker的上方
content:
"<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow4 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
26.43346,
110.85674),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow5 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
26.39156,
110.32285),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow6 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
29.39971,
110.16428),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow7 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
28.45277,
110.39388),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow8 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
27.90834,
110.59486),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow9 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
27.86555,
109.80256),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow10 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
26.15794,
109.78449),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow11 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
28.21639,
110.21965),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow12 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
27.94843,
109.59832),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow13 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
28.70001,
109.66054),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow14 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
28.61711,
109.95085),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow15 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
29.00515,
109.84807),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow16 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
29.4579,
109.44387),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow17 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
28.57211,
109.48224),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow18 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
27.72663,
111.32743),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
var infoWindow19 =
new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(
27.69271,
111.66446),
offset: { x: 0, y: -
8 },
content: "<a href='#' target='_blank' style='text-decoration: none;color: #666;font-size: 12px;'><img src='./imgtest/2.png' width='50'><p>特产名称</p></a>"
});
}
window.onload=
function(){
initMap()
}
</script>
</body>
</html>
ps:点击Marker视图区自动居中
转载于:https://www.cnblogs.com/Jayeblog/p/11534411.html
