当前位置:   article > 正文

腾讯地图api获取地理位置、经纬度等信息_service.search()腾讯地图

service.search()腾讯地图

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

  1. var citylocation; // 定位当前城市
  2. var searchService; // 地图搜索
  3. var geocoder; // 地址解析
  4. var map; // 地图
  5. var markers = new Array(); // 搜索结果
  6. var init = function() {
  7. var center = new qq.maps.LatLng(39.916527, 116.397128);
  8. map = new qq.maps.Map(document.getElementById('mapcontainer'), {
  9. center: center,
  10. zoom: 13
  11. });
  12. //设置城市信息查询服务
  13. citylocation = new qq.maps.CityService({
  14. //请求成功回调函数
  15. complete: function(result) {
  16. console.log(result)
  17. map.setCenter(result.detail.latLng);
  18. //alert(result.detail.latLng);
  19. },
  20. error: function() {
  21. alert("出错了,请输入正确的经纬度!!!");
  22. }
  23. });
  24. citylocation.searchLocalCity();
  25. geocoder = new qq.maps.Geocoder();
  26. geocoder.setComplete(function(result) {
  27. console.log(result)
  28. map.setCenter(result.detail.location);
  29. var info = new qq.maps.InfoWindow({
  30. map: map
  31. });
  32. info.open();
  33. info.setContent('<div style="width:280px;height:50px;">' +
  34. result.detail.address + '</div>');
  35. info.setPosition(result.detail.location);
  36. document.getElementById("province").value = result.detail.addressComponents.province;
  37. document.getElementById("city").value = result.detail.addressComponents.city;
  38. document.getElementById("distric").value = result.detail.addressComponents.district;
  39. document.getElementById("lng").value = result.detail.location.lng;
  40. document.getElementById("lat").value = result.detail.location.lat;
  41. document.getElementById("address").value = result.detail.address;
  42. if (result.detail.addressComponents.district != '') {
  43. var httpRequest = new XMLHttpRequest();//第一步:创建需要的对象
  44. httpRequest.open('POST', '/api/area/map-search', true); //第二步:打开连接
  45. httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注:post方式必须设置请求头(在建立连接后设置请求头)
  46. httpRequest.send('keyword='+result.detail.addressComponents.district);//发送请求 将情头体写在send中
  47. /**
  48. * 获取数据后的处理程序
  49. */
  50. httpRequest.onreadystatechange = function () {//请求后的回调接口,可将请求成功后要执行的程序写在其中
  51. if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
  52. var pointInfo = JSON.parse(httpRequest.responseText);//获取到服务端返回的数据
  53. if (pointInfo.code == 200) {
  54. document.getElementById("code").value = pointInfo.data.code;
  55. }
  56. }
  57. };
  58. }
  59. });
  60. searchService = new qq.maps.SearchService({
  61. //检索成功的回调函数
  62. complete: function(results) {
  63. //设置回调函数参数
  64. var pois = results.detail.pois;
  65. /*var info = new qq.maps.InfoWindow({
  66. map: map
  67. });*/
  68. var latlngBounds = new qq.maps.LatLngBounds();
  69. for (var i = 0, l = pois.length; i < l; i++) {
  70. var poi = pois[i];
  71. //扩展边界范围,用来包含搜索到的Poi点
  72. latlngBounds.extend(poi.latLng);
  73. (function(n) {
  74. var marker = new qq.maps.Marker({
  75. map: map
  76. });
  77. marker.setPosition(pois[n].latLng);
  78. marker.setTitle(i + 1);
  79. markers.push(marker);
  80. qq.maps.event.addListener(marker, 'click', function() {
  81. //infoWin.open();
  82. //infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为:' +
  83. // pois[n].id + ',POI的名称为:' + pois[n].name + ',POI的地址为:' + pois[n].address + ',POI的类型为:' + pois[n].type + '</div>');
  84. //infoWin.setPosition(pois[n].latLng);
  85. //infoWin.setPosition(pois[n].latLng);
  86. geocoder.getAddress(pois[n].latLng);
  87. });
  88. })(i);
  89. }
  90. //调整地图视野
  91. map.fitBounds(latlngBounds);
  92. },
  93. //若服务请求失败,则运行以下函数
  94. error: function(e) {
  95. console.log(e)
  96. alert("出错了。");
  97. }
  98. });
  99. function clearOverlays(overlays) {
  100. var overlay;
  101. while (overlay = overlays.pop()) {
  102. overlay.setMap(null);
  103. }
  104. }
  105. document.getElementById("searchmapBtn").addEventListener("click", function (ev) {
  106. var keyword = document.getElementById("searchmap").value;
  107. var pageIndex = 0;
  108. var pageCapacity = 5;
  109. clearOverlays(markers);
  110. //设置搜索页码
  111. searchService.setPageIndex(pageIndex);
  112. //设置每页的结果数
  113. searchService.setPageCapacity(pageCapacity);
  114. //根据输入的关键字在搜索范围内检索
  115. searchService.search(keyword);
  116. })
  117. }
  118. window.onload = init;

 

获取行政区因为跨域问题,需要在后台通过get获取

  1. public Map<String, String> getInfoByKeyword(String keyword)
  2. {
  3. String url = "https://apis.map.qq.com/ws/district/v1/search?&keyword="+keyword+"&key="+mapkey;
  4. JSONObject res = HttpTools.doHttpGet(url);
  5. Map<String, String> result = new HashMap<String, String>();
  6. if (null != res) {
  7. try {
  8. Integer status = res.getInt("status");
  9. if (status == 0) {
  10. JSONArray areas = res.getJSONArray("result");
  11. if (areas.length() > 0) {
  12. JSONArray first = areas.getJSONArray(0);
  13. // 可能返回多个,只获取第一个
  14. JSONObject info = first.getJSONObject(0);
  15. String lat = "";
  16. String lng = "";
  17. if (info.has("location")) {
  18. JSONObject location = info.getJSONObject("location");
  19. lat = location.getString("lat");
  20. lng = location.getString("lng");
  21. }
  22. String code = info.getString("id");
  23. String name = info.getString("fullname");
  24. result.put("code", code);
  25. result.put("name", name);
  26. result.put("lat", lat);
  27. result.put("lng", lng);
  28. return result;
  29. }
  30. }
  31. result.put("msg", "没有相关数据");
  32. } catch (JSONException ex) {
  33. result.put("msg", "解析数据失败");
  34. }
  35. }
  36. result.put("msg", "获取数据失败");
  37. return result;
  38. }

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/301254
推荐阅读
相关标签
  

闽ICP备14008679号