赞
踩
需要使用地图搜索,并点击结果后去省市区、经纬度、详细地址、行政区信息
- 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('<div style="width:280px;height:50px;">' +
- result.detail.address + '</div>');
- 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('<div style="width:280px;height:100px;">' + 'POI的ID为:' +
- // pois[n].id + ',POI的名称为:' + pois[n].name + ',POI的地址为:' + pois[n].address + ',POI的类型为:' + pois[n].type + '</div>');
- //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<String, String> getInfoByKeyword(String keyword)
- {
- String url = "https://apis.map.qq.com/ws/district/v1/search?&keyword="+keyword+"&key="+mapkey;
- JSONObject res = HttpTools.doHttpGet(url);
-
- Map<String, String> result = new HashMap<String, String>();
- 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;
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。