获取地名

在html中获取地名，格式如：“邯郸市火车站”，城市名+地名的形式

  1. //地图的父组件
  2. showLocationRequest(str) {
  3.      let pramas = new FormData();
  4.      pramas.append("address", str);
  5.      this.http.post(this.hostUrl + 'Api/showLocation', pramas).subscribe(
  6.          (response: Analysis) => {
  7.              this.showLocationChange.next(response);
  8.          }
  9.      )
  10.  }

接口

  1. http://www.mapocc.com/Api/showLocation/address/邯郸市火车站

image.png

  1. {
  2. status: 1,
  3. info: "返回成功",
  4. data: {
  5. coordinate: "36.631262731204,114.54562822824",
  6. line_info: "{"content":{"geo":"4|12751236.7236,4362092.35239;12751404.5359,4362182.83531|1-12751241.5262,4362182.83531,12751404.5359,4362166.6619,12751399.7358,4362092.35239,12751236.7236,4362104.66658,12751241.5262,4362182.83531;","uid":"8a181d8dce36ebc884330470"},"current_city":{"code":1,"geo":"1|11590057.96,4489812.75;11590057.96,4489812.75|11590057.96,4489812.75;","level":0,"name":"\u4e2d\u56fd","sup":0,"sup_bus":0,"sup_business_area":0,"sup_lukuang":0,"sup_subway":0,"type":0,"up_province_name":"\u4e2d\u56fd"},"err_msg":"","hot_city":["\u5317\u4eac\u5e02|131","\u4e0a\u6d77\u5e02|289","\u5e7f\u5dde\u5e02|257","\u6df1\u5733\u5e02|340","\u6210\u90fd\u5e02|75","\u5929\u6d25\u5e02|332","\u5357\u4eac\u5e02|315","\u676d\u5dde\u5e02|179","\u6b66\u6c49\u5e02|218","\u91cd\u5e86\u5e02|132"],"result":{"data_security_filt_res":0,"error":0,"illegal":0,"qid":"","type":10,"uii_type":"china_main","region":"0","uii_qt":"poi_profile","login_debug":0},"uii_err":0}"
  7. }
  8. }

后台接口

ak、wk：就是用百度接口，申请的两个key 

  1. public function showLocation($address = null) {
  2.         $url = 'http://api.map.baidu.com/geocoder/v2/?address=' . $address . '&output=json&ak=' . self::ak;
  3.         $info = self::getCurl($url);
  4.         $infolist = json_decode($info);
  5.         if (isset($infolist->result->location) && !empty($infolist->result->location)) {
  6.             $array = array(
  7.                 'lng' => $infolist->result->location->lng,
  8.                 'lat' => $infolist->result->location->lat,
  9.             );
  10.             /*逆地理编码*/
  11.             $location = $array['lat'] . ',' . $array['lng'];
  12.         }
  13.         //$location = $form[x] . ',' . $form[y];
  14.         $url = 'http://api.map.baidu.com/geocoder/v2/?location=' . $location . '&output=json&pois=1&ak=' . self::ak;
  15.         $info = self::getCurl($url);
  16.         $infolist = json_decode($info, true);
  17.         if (!empty($infolist['result']['poiRegions'])) {
  18.             $tags = explode(';', $infolist['result']['poiRegions'][0]['tag']);
  19.             $tag = $tags[0];
  20.             $house = $infolist['result']['poiRegions'][0]['name'];
  21.             $city = $infolist['result']['addressComponent']['city'];
  22.             $line_info = $this->queryHouse($house, $city, $tag);
  23.             $array_data = array();
  24.             $array_data['coordinate'] = $location;
  25.             $array_data['line_info'] = $line_info;
  26.             if(!empty($line_info)){
  27.                 $this->ajaxReturnBlueMP(1, '返回成功', $array_data);
  28.             }else{
  29.                 $this->ajaxReturnBlueMP(0, '返回失败', '');
  30.             }
  31.         }
  32.     }
  33.     private function queryHouse($house = null, $city = null, $tag = null) {
  34.         $baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2';
  35.         $url = $baseURL . "&q=" . $house . "&region=" . $city . "&ak=" . self::wk;
  36.         $info = self::getCurl($url);
  37.         //p($info);
  38.         $info_list = json_decode($info, true);
  39.         if (!empty($info_list['results'])) {
  40.             $uid = $info_list['results'][0]['uid'];
  41.         }
  42.         if ($uid) {
  43.             $queryHouseOutline_baseURL = 'http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18';
  44.             $queryHouseOutline_url = $queryHouseOutline_baseURL . '&uid=' . $uid;
  45.             $line_info = self::getCurl($queryHouseOutline_url);
  46.              return $line_info;
  47.         }
  48.     }

计算数据

  1. // 地图的父组件
  2. this.subscriptionLocation = this.analysisDataService.showLocationChange.subscribe(
  3.   data => {
  4.     this.showLocationData = data
  5.     if (this.showLocationData.status == 1) {
  6.       let mapdata = JSON.parse(this.showLocationData.data.line_info)
  7.       this.calcPoint(mapdata)
  8.     } else {
  9.       this._toastrService.error(this.showLocationData.info);
  10.     }
  11.   }
  12. )
  13. calcPoint(data) {
  14.   this.place = data.content.geo;
  15.   this.pointmap = true;
  16. }

展示数据

  1. ngAfterViewInit() {
  2.   //@ts-ignore
  3.   this.map = new BMap.Map(this.mapId, {
  4.     enableMapClick: false
  5.   });
  6.   this.map.centerAndZoom("北京市", 13);
  7.   this.map.disableDragging();
  8.   this.map.disableScrollWheelZoom();
  9.   this.map.disableDoubleClickZoom();
  10.   let mapStyle = { style: "dark" }
  11.   this.map.setMapStyle(mapStyle);
  12.   var geoPoint = this.mapService.parseGeo(this.place);
  13.   //@ts-ignore
  14.   var points = this.mapService.coordinateToPoints(this.map, geoPoint.points);
  15.   console.log('points: ', points);
  16.   //@ts-ignore
  17.   var ply = new BMap.Polygon(points, {
  18.     strokeWeight: 2,
  19.     strokeColor: "#f35857",
  20.     strokeOpacity: 0.8,
  21.     fillColor: "transparent"
  22.   }); //建立多边形覆盖物
  23.   this.map.addOverlay(ply);
  24.   setTimeout(() => {
  25.     this.map.setViewport(ply.getPath()); //调整视野
  26.     let e = this.map.getBounds(),
  27.         t = e.getSouthWest(),
  28.         a = e.getNorthEast();
  29.     let range = {
  30.       min_lng: t.lng,
  31.       max_lng: a.lng,
  32.       min_lat: t.lat,
  33.       max_lat: a.lat
  34.     }
  35.     console.log(range)
  36.   }, 1000)
  37. }
  1. /**
  2.    * 墨卡托坐标解析
  3.    * @param {} mocator
  4.    * @return {}
  5.    */
  6. parseGeo(mocator) {
  7.   if (typeof mocator != 'string') {
  8.     return {};
  9.   }
  10.   let t = mocator.split("|");
  11.   let n = parseInt(t[0]);
  12.   let i = t[1];
  13.   let r = t[2];
  14.   let o = r.split(";");
  15.   if (n === 4) {
  16.     for (var a = [], s = 0; s < o.length - 1; s++) {
  17.       "1" === o[s].split("-")[0] && a.push(o[s].split("-")[1]);
  18.     }
  19.     o = a;
  20.     o.push("");
  21.   }
  22.   let u: any = [];
  23.   switch (n) {
  24.     case 1:
  25.       u.push(o[0]);
  26.       break;
  27.     case 2:
  28.     case 3:
  29.     case 4:
  30.       for (var s = 0; s < o.length - 1; s++) {
  31.         var l = o[s];
  32.         if (l.length > 100) {
  33.           l = l.replace(/(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*),(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*)(,)/g,
  34.                         "$1,$2;");
  35.           u.push(l);
  36.         } else {
  37.           for (var c = [], d = l.split(","), f = 0; f < d.length; f += 2) {
  38.             var p = d[f];
  39.             var h = d[f + 1];
  40.             c.push(p + "," + h);
  41.           }
  42.           u.push(c.join(";"))
  43.         }
  44.       }
  45.       break;
  46.     default:
  47.       break;
  48.   }
  49.   if (u.length <= 1) {
  50.     u = u.toString();
  51.   }
  52.   var result = {
  53.     type: n,
  54.     bound: i,
  55.     points: u
  56.   };
  57.   return result;
  58. };
  59. /**
  60.   * 墨卡托坐标转百度坐标
  61.   * @param {} coordinate
  62.   * @return {}
  63.   */
  64. coordinateToPoints(map, coordinate) {
  65.   var points = [];
  66.   if (coordinate) {
  67.     var arr = coordinate.split(";");
  68.     if (arr) {
  69.       for (var i = 0; i < arr.length; i++) {
  70.         var coord = arr[i].split(",");
  71.         if (coord && coord.length == 2) {
  72.           //@ts-ignore
  73.           var mctXY = new BMap.Pixel(coord[0], coord[1]);
  74.           var project = map.getMapType().getProjection();
  75.           var point = project.pointToLngLat(mctXY);
  76.           //@ts-ignore
  77.           points.push(new BMap.Point(point.lng, point.lat));
  78.         }
  79.       }
  80.     }
  81.   }
  82.   return points;
  83. };

完整jq代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  7.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZX6UGVRcLVCVH30bgEx9bv5FOlr2rI5I">
  8.     </script>
  9.     <script src="../js/jquery-3.2.0.min.js"></script>
  10.     <title>地图画圈</title>
  11.     <style type="text/css">
  12.         body {
  13.             height: 100%;
  14.             margin: 0px;
  15.             padding: 0px;
  16.             font-family: "微软雅黑";
  17.         }
  19.         #container {
  20.             height: 500px;
  21.             width: 100%;
  22.         }
  23.     </style>
  24. </head>
  26. <body>
  27.     <div id="container"></div>
  28.     <div>
  29.         <input id="area" type="text">
  30.         <button id="getArea">获取</button>
  31.     </div>
  32. </body>
  34. </html>
  35. <script type="text/javascript">
  36.     //判断浏览区是否支持canvas
  37.     if (!isSupportCanvas()) {
  38.         alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
  39.     }
  41.     function isSupportCanvas() {
  42.         var elem = document.createElement('canvas');
  43.         return !!(elem.getContext && elem.getContext('2d'));
  44.     }
  46.     function setArea(str) {
  47.         var geoPoint = parseGeo(str);
  48.         var points = coordinateToPoints(map, parseGeo(str).points);
  49.         var ply = new BMap.Polygon(points, {
  50.             strokeWeight: 2,
  51.             strokeColor: "#f35857",
  52.             strokeOpacity: 0.8,
  53.             fillColor: "transparent"
  54.         });
  55.         map.clearOverlays(); //清除地图上所有覆盖物
  56.         map.addOverlay(ply); //建立多边形覆盖物
  57.         map.setViewport(ply.getPath());
  58.     }
  60.     function getGeo(str) {
  61.         $.ajax({
  62.             type: 'POST',
  63.             url: "http://www.mapocc.com/Api/showLocation",
  64.             data: {
  65.                 address: str
  66.             },
  67.             success: function (data) {
  68.                 data = JSON.parse(data);
  69.                 let line_info = data.data.line_info;
  70.                 line_info = JSON.parse(line_info);
  71.                 let geo = line_info.content.geo;
  72.                 console.log('geo: ', geo);
  73.                 setArea(geo);
  74.             },
  75.             error: function (data) {}
  76.         });
  77.     }
  79.     function parseGeo(mocator) {
  80.         if (typeof mocator != 'string') {
  81.             return {};
  82.         }
  83.         let t = mocator.split("|");
  84.         let n = parseInt(t[0]);
  85.         let i = t[1];
  86.         let r = t[2];
  87.         // let o = mocator.split(";");
  88.         let o = r.split(";");
  89.         if (n === 4) {
  90.             for (var a = [], s = 0; s < o.length - 1; s++) {
  91.                 "1" === o[s].split("-")[0] && a.push(o[s].split("-")[1]);
  92.             }
  93.             o = a;
  94.             o.push("");
  95.         }
  96.         let u = [];
  97.         switch (n) {
  98.             case 1:
  99.                 u.push(o[0]);
  100.                 break;
  101.             case 2:
  102.             case 3:
  103.             case 4:
  104.                 for (var s = 0; s < o.length - 1; s++) {
  105.                     var l = o[s];
  106.                     if (l.length > 100) {
  107.                         l = l.replace(
  108.                             /(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*),(-?[1-9]\d*\.\d*|-?0\.\d*[1-9]\d*|-?0?\.0+|0|-?[1-9]\d*)(,)/g,
  109.                             "$1,$2;");
  110.                         u.push(l);
  111.                     } else {
  112.                         for (var c = [], d = l.split(","), f = 0; f < d.length; f += 2) {
  113.                             var p = d[f];
  114.                             var h = d[f + 1];
  115.                             c.push(p + "," + h);
  116.                         }
  117.                         u.push(c.join(";"))
  118.                     }
  119.                 }
  120.                 break;
  121.             default:
  122.                 break;
  123.         }
  125.         if (u.length <= 1) {
  126.             u = u.toString();
  127.         }
  129.         var result = {
  130.             type: n,
  131.             bound: i,
  132.             points: u
  133.         };
  134.         return result;
  135.     };
  137.     function coordinateToPoints(map, coordinate) {
  138.         var points = [];
  139.         if (coordinate) {
  140.             var arr = coordinate.split(";");
  141.             if (arr) {
  142.                 for (var i = 0; i < arr.length; i++) {
  143.                     var coord = arr[i].split(",");
  144.                     if (coord && coord.length == 2) {
  145.                         //@ts-ignore
  146.                         var mctXY = new BMap.Pixel(coord[0], coord[1]);
  147.                         var project = map.getMapType().getProjection();
  148.                         var point = project.pointToLngLat(mctXY);
  149.                         //@ts-ignore
  150.                         points.push(new BMap.Point(point.lng, point.lat));
  151.                     }
  152.                 }
  153.             }
  154.         }
  155.         return points;
  156.     };
  158.     var points = [];
  159.     var map = new BMap.Map("container"); // 创建地图实例
  160.     var point = new BMap.Point(116.418261, 39.921984);
  161.     map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
  162.     map.enableScrollWheelZoom(); // 允许滚轮缩放
  163.     map.disableDoubleClickZoom();
  164.     // 故宫
  165.     var str =
  166.         "4|12957492.5276,4826153.61023;12958721.1443,4828041.10283|1-12957492.5276,4827968.34123,12957517.7271,4827978.71655,12957551.7012,4827985.70079,12957761.8414,4828001.08931,12958090.3003,4828010.18168,12958291.9749,4828022.30354,12958654.0221,4828041.10283,12958662.1553,4828035.30001,12958665.3908,4828016.49746,12958721.1443,4826620.84215,12958718.3665,4826607.98754,12958705.7846,4826595.30705,12958274.1406,4826576.04036,12958295.0962,4826161.28862,12958226.0039,4826158.83847,12958128.341,4826156.38524,12958047.0511,4826153.61023,12958044.7491,4826273.98684,12958026.0001,4826566.42516,12957796.4832,4826554.24398,12957566.8973,4826534.12694,12957551.4596,4826539.32662,12957547.5637,4826555.47632,12957492.5276,4827968.34123;"
  167.     setArea(str);
  169.     $(document).on('click', '#getArea', function () {
  170.         getGeo($('#area').val())
  171.     })
  172. </script>

结果

image.png
image.png
{“status”:1,”info”:”\u8fd4\u56de\u6210\u529f”,”data”:{“coordinate”:”39.987270075837,116.3448945207”,”line_info”:”{\”content\”:{\”geo\”:\”4|12951419.39,4836310.46;12951655.84,4836518.99|1-12951419.39,4836494.53,12951429.18,4836445.59,12951420.84,4836434.48,12951424.85,4836368.49,12951496.87,4836377.46,12951505.89,4836310.46,12951573.91,4836316.54,12951655.84,4836334.05,12951641.74,4836441.63,12951637.57,4836487.61,12951607.41,4836483.97,12951603.85,4836510.02,12951598.4,4836518.99,12951583.92,4836517.98,12951429.86,4836502.49,12951419.39,4836494.53;\”,\”uid\”:\”81cec255a85267f907fef5b9\”},\”current_city\”:{\”code\”:1,\”geo\”:\”1|11590057.96,4489812.75;11590057.96,4489812.75|11590057.96,4489812.75;\”,\”level\”:0,\”name\”:\”\u4e2d\u56fd\”,\”sup\”:0,\”sup_bus\”:0,\”sup_business_area\”:0,\”sup_lukuang\”:0,\”sup_subway\”:0,\”type\”:0,\”up_province_name\”:\”\u4e2d\u56fd\”},\”err_msg\”:\”\”,\”hot_city\”:[\”\u5317\u4eac\u5e02|131\”,\”\u4e0a\u6d77\u5e02|289\”,\”\u5e7f\u5dde\u5e02|257\”,\”\u6df1\u5733\u5e02|340\”,\”\u6210\u90fd\u5e02|75\”,\”\u5929\u6d25\u5e02|332\”,\”\u5357\u4eac\u5e02|315\”,\”\u676d\u5dde\u5e02|179\”,\”\u6b66\u6c49\u5e02|218\”,\”\u91cd\u5e86\u5e02|132\”],\”result\”:{\”data_security_filt_res\”:0,\”error\”:0,\”illegal\”:0,\”qid\”:\”\”,\”type\”:10,\”uii_type\”:\”china_main\”,\”region\”:\”0\”,\”uii_qt\”:\”poi_profile\”,\”login_debug\”:0},\”uii_err\”:0}”}}