需要使用地图搜索,并点击结果后去省市区、经纬度、详细地址、行政区信息
var citylocation; // 定位当前城市
var searchService; // 地图搜索
var geocoder; // 地址解析
var map; // 地图
var markers = new Array(); // 搜索结果
var init = function() {
var center = new qq.maps.LatLng(39.916527, 116.397128);
map = new qq.maps.Map(document.getElementById('mapcontainer'), {
center: center,
zoom: 13
});
//设置城市信息查询服务
citylocation = new qq.maps.CityService({
//请求成功回调函数
complete: function(result) {
console.log(result)
map.setCenter(result.detail.latLng);
//alert(result.detail.latLng);
},
error: function() {
alert("出错了,请输入正确的经纬度!!!");
}
});
citylocation.searchLocalCity();
geocoder = new qq.maps.Geocoder();
geocoder.setComplete(function(result) {
console.log(result)
map.setCenter(result.detail.location);
var info = new qq.maps.InfoWindow({
map: map
});
info.open();
info.setContent('' +
result.detail.address + '');
info.setPosition(result.detail.location);
document.getElementById("province").value = result.detail.addressComponents.province;
document.getElementById("city").value = result.detail.addressComponents.city;
document.getElementById("distric").value = result.detail.addressComponents.district;
document.getElementById("lng").value = result.detail.location.lng;
document.getElementById("lat").value = result.detail.location.lat;
document.getElementById("address").value = result.detail.address;
if (result.detail.addressComponents.district != '') {
var httpRequest = new XMLHttpRequest();//第一步:创建需要的对象
httpRequest.open('POST', '/api/area/map-search', true); //第二步:打开连接
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)
httpRequest.send('keyword='+result.detail.addressComponents.district);//发送请求 将情头体写在send中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {//请求后的回调接口,可将请求成功后要执行的程序写在其中
if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
var pointInfo = JSON.parse(httpRequest.responseText);//获取到服务端返回的数据
if (pointInfo.code == 200) {
document.getElementById("code").value = pointInfo.data.code;
}
}
};
}
});
searchService = new qq.maps.SearchService({
//检索成功的回调函数
complete: function(results) {
//设置回调函数参数
var pois = results.detail.pois;
/*var info = new qq.maps.InfoWindow({
map: map
});*/
var latlngBounds = new qq.maps.LatLngBounds();
for (var i = 0, l = pois.length; i < l; i++) {
var poi = pois[i];
//扩展边界范围,用来包含搜索到的Poi点
latlngBounds.extend(poi.latLng);
(function(n) {
var marker = new qq.maps.Marker({
map: map
});
marker.setPosition(pois[n].latLng);
marker.setTitle(i + 1);
markers.push(marker);
qq.maps.event.addListener(marker, 'click', function() {
//infoWin.open();
//infoWin.setContent('' + 'POI的ID为:' +
// pois[n].id + ',POI的名称为:' + pois[n].name + ',POI的地址为:' + pois[n].address + ',POI的类型为:' + pois[n].type + '');
//infoWin.setPosition(pois[n].latLng);
//infoWin.setPosition(pois[n].latLng);
geocoder.getAddress(pois[n].latLng);
});
})(i);
}
//调整地图视野
map.fitBounds(latlngBounds);
},
//若服务请求失败,则运行以下函数
error: function(e) {
console.log(e)
alert("出错了。");
}
});
function clearOverlays(overlays) {
var overlay;
while (overlay = overlays.pop()) {
overlay.setMap(null);
}
}
document.getElementById("searchmapBtn").addEventListener("click", function (ev) {
var keyword = document.getElementById("searchmap").value;
var pageIndex = 0;
var pageCapacity = 5;
clearOverlays(markers);
//设置搜索页码
searchService.setPageIndex(pageIndex);
//设置每页的结果数
searchService.setPageCapacity(pageCapacity);
//根据输入的关键字在搜索范围内检索
searchService.search(keyword);
})
}
window.onload = init;
获取行政区因为跨域问题,需要在后台通过get获取
public Map getInfoByKeyword(String keyword)
{
String url = "https://apis.map.qq.com/ws/district/v1/search?&keyword="+keyword+"&key="+mapkey;
JSONObject res = HttpTools.doHttpGet(url);
Map result = new HashMap();
if (null != res) {
try {
Integer status = res.getInt("status");
if (status == 0) {
JSONArray areas = res.getJSONArray("result");
if (areas.length() > 0) {
JSONArray first = areas.getJSONArray(0);
// 可能返回多个,只获取第一个
JSONObject info = first.getJSONObject(0);
String lat = "";
String lng = "";
if (info.has("location")) {
JSONObject location = info.getJSONObject("location");
lat = location.getString("lat");
lng = location.getString("lng");
}
String code = info.getString("id");
String name = info.getString("fullname");
result.put("code", code);
result.put("name", name);
result.put("lat", lat);
result.put("lng", lng);
return result;
}
}
result.put("msg", "没有相关数据");
} catch (JSONException ex) {
result.put("msg", "解析数据失败");
}
}
result.put("msg", "获取数据失败");
return result;
}