txmap1.html
5.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>点击地图事件</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
overflow:hidden;
}
#container {
min-width:603px;
min-height:767px;
}
</style>
</head>
<body onload="">
<div class="LogoCon clear" style="font-size:18px;">
<div style="display:block">
<span>当前坐标：</span>
<input type="text" readonly id="pointInput" class="pointInput"
style="display: inline-block; width: 160px; height: 20px; line-height: 20px; font-size: 14px; font-weight: 700;" />
<span> <input type="button" value="确定选择" onclick="confirmSelect()" style="margin-left: 8px;font-size:14px;width:80px;" /></span>
</div>
</div>
<div id="container"></div>
<!--<div id="searchPart">-->
<!--<input type="text" id="searchInput" placeholder="请输入">-->
<!--<button id="searchBtn">搜索</button>-->
<!--</div>-->
</body>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<!--<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>-->
<script>
// var markersArray=[];
// var init = function() {
// var map = new qq.maps.Map(document.getElementById("container"),{
// center: new qq.maps.LatLng(39.916527,116.397128),
// zoom: 13,
// });
// //添加监听事件
// qq.maps.event.addListener(map, 'click', function(data) {
//
// for (i in markersArray) {
// markersArray[i].setMap(null);
// }
//
// var anchor = new qq.maps.Point(6, 6),
// size = new qq.maps.Size(24, 24),
// origin = new qq.maps.Point(0, 0),
// marker = new qq.maps.Marker({
// map: map,
// position:data.latLng});
// markersArray.push(marker);
// console.log(data);
// document.getElementById('pointInput').value=data.latLng;
// setTimeout(function(){
// // alert(data.latLng);
// },200);
//
//
// });
// }
var map, marker, infoWindow;
// 创建信息窗口
var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map("container", {
center: center
});
//初始化marker图层
var markerLayer = new TMap.MultiMarker({
id: 'marker-layer',
map: map
});
//监听点击事件添加marker
map.on("click", (evt) => {
console.log(evt.latLng);
document.getElementById('pointInput').value=evt.latLng
});
function searchClick() {
let searchInput = document.getElementById('searchInput').value; // 获取搜索内容
let url = [
'https://apis.map.qq.com/ws/place/v1/search',
'?boundary=nearby(39.984104,116.307503,1000,0)',
`&keyword=${searchInput}`,
'&page_size=10&page_index=1&orderby=_distance',
'&output=jsonp&callback=cb',
'&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
].join('');
jsonp_request(url);
infoWindow.close(); // 关闭信息窗口
}
// 添加搜索按钮点击事件
const searchBtn = document.getElementById('searchBtn');
searchBtn.addEventListener('click', searchClick, false);
function jsonp_request(url) {
let script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
function confirmSelect(){
var selectLocation = {};
var gpsAddr = document.getElementById('currentAddr');
var location = document.getElementById('pointInput');
/* selectLocation.gpsAddr = gpsAddr.innerHTML;*/
selectLocation.location = location.value;
console.log(selectLocation.location);
window.opener.SelectLocation.selectCallback(selectLocation);
window.close();
}
function cb(ret) {
let newBounds = new TMap.LatLngBounds();
let markerArr = [];
if(ret && ret.status===0 && ret.data.length>0) {
// 将搜索结果保存进数组中
ret.data.forEach( (item, index) => {
let position = new TMap.LatLng(item.location.lat, item.location.lng);
markerArr.push({
position: position,
properties: {
title: item.title,
address: item.address,
tel: item.tel!==' ' ? item.tel : '暂无'
}
});
// 寻找搜索结果的边界
newBounds.extend(position);
});
// 更新marker层，显示标记
marker.setGeometries(markerArr);
// 地图自适应边界
map.fitBounds(newBounds, {
padding: 100 // 边界与内容之间留的间距
});
}
}
</script>
</html>