腾讯地图api获取地理位置、经纬度等信息

需要使用地图搜索,并点击结果后去省市区、经纬度、详细地址、行政区信息

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;
    }

腾讯地图api获取地理位置、经纬度等信息_第1张图片

 

你可能感兴趣的:(js,java)