(以“<div id="examples_api_center"><div class="title-hd">POI综合检索</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></di...”为内容创建页面) |
|||
第1行: | 第1行: | ||
− | <div id="examples_api_center"><div class="title-hd">POI综合检索</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi"> | + | <div id="examples_api_center"><div class="title-hd">POI综合检索</div></div><div class="demos_wrap"><div class="header"><div class="active">功能场景</div></div><div class="wrap-mi">该示例展示了以“行政区划”、“周边”、“视野范围”三种类型的POI检索。</div><div class="header"><div class="active">DEMO</div></div><div class="andiord-wrap wrap"><div class="wrap-wp"><div class="pc-video"><div class="video-box infor"><div class="video-control1"></div><pre>https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov</pre> |
− | </div><div class="video-title1"> | + | </div><div class="video-title1">POI综合检索</div></div></div><div class="api-table-box"><div class="api-info-box"><div class="pre-nav"><div class="left-icon"></div><div>核心接口</div><br/></div> |
{| width="370" border="1" | {| width="370" border="1" | ||
|- | |- | ||
第8行: | 第8行: | ||
| width="90" | '''参考文档''' | | width="90" | '''参考文档''' | ||
|- | |- | ||
− | | | + | | Boundary |
− | | | + | | bd.get(city,function) |
− | | | + | | 获取行政区域 |
− | | | + | | 暂无 |
|- | |- | ||
− | | | + | | Polygon |
− | | | + | | new BMapGL.Polygon(points,opts) |
− | | | + | | 多边形绘制行政区域 |
− | | [[jspopularGL/guide/ | + | | [[jspopularGL/guide/addOverlay|绘制点、线、面]] |
+ | |- | ||
+ | | Geocoder | ||
+ | | geo.getPoint(city, function) | ||
+ | | 根据城市获取地图范围 | ||
+ | | 暂无 | ||
+ | |- | ||
+ | | LocalSearch | ||
+ | | local.search(srchvalue, point, 1000) | ||
+ | | 检索 | ||
+ | | 暂无 | ||
|} | |} | ||
− | </div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and"> | + | </div></div><div class="header"><div class="active">核心代码</div></div><div class="pre-wrap"><div class="pre-wrap-w pre-wrap-w-and"><pre class="prettyprint prettyprinted pre-and"> /** |
− | + | * 行政区划内搜索 | |
− | + | */ | |
− | + | function switchBoundry() { | |
− | + | function getBoundary() { | |
− | + | var bdary = new BMapGL.Boundary(); | |
− | + | bdary.get(configs.city, function (rs) { // 获取行政区域 | |
− | + | map.clearOverlays(); | |
− | + | var count = rs.boundaries.length; // 行政区域的点有多少个 | |
− | + | if (count === 0) { | |
− | + | alert('未能获取当前输入行政区域'); | |
− | + | return; | |
− | + | } | |
− | + | var pointArray = []; | |
− | + | for (var i = 0; i < count; i++) { | |
− | + | var ply = new BMapGL.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: '#f00'}); // 建立多边形覆盖物 | |
− | + | map.addOverlay(ply); | |
− | + | pointArray = pointArray.concat(ply.getPath()); | |
− | + | } | |
− | + | map.setViewport(pointArray); // 调整视野 | |
− | + | }); | |
− | + | } | |
− | + | var geo = new BMapGL.Geocoder(); | |
− | + | geo.getPoint(configs.city, function (point) { | |
− | + | if (point) { | |
− | + | var local = new BMapGL.LocalSearch(configs.city, { | |
+ | renderOptions: {map: map} | ||
+ | }); | ||
+ | local.search(configs.srchvalue, point, 1000); | ||
+ | } else { | ||
+ | console.log('选择的城市有误'); | ||
+ | } | ||
+ | }); | ||
+ | setTimeout(function () { | ||
+ | getBoundary(); | ||
+ | }, 0); | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * 周边搜索(圆形区域检索) | ||
+ | */ | ||
+ | function switchNearby() { | ||
+ | map.clearOverlays(); | ||
+ | var mylocation = new BMapGL.Geolocation(); | ||
+ | mylocation.getCurrentPosition(function (rs) { | ||
+ | if (this.getStatus() === BMAP_STATUS_SUCCESS) { | ||
+ | map.clearOverlays(); | ||
+ | map.panTo(rs.point); | ||
+ | var point = rs.point; | ||
+ | var circle = new BMapGL.Circle(point, 5000, { | ||
+ | fillColor: 'blue', | ||
+ | strokeWeight: 1, | ||
+ | fillOpacity: 0.2, | ||
+ | strokeOpacity: 0.3 | ||
+ | }); | ||
+ | map.addOverlay(circle); | ||
+ | var local = new BMapGL.LocalSearch(point, { | ||
+ | renderOptions: {map: map} | ||
+ | }); | ||
+ | local.searchNearby(configs.srchvalue, point, 5000); | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * 视野范围内搜索(矩形区域检索) | ||
+ | */ | ||
+ | function switchViewport() { | ||
+ | map.clearOverlays(); | ||
+ | var bounds = map.getBounds(); // 返回地图可视区域 | ||
+ | var local = new BMapGL.LocalSearch(map, { | ||
+ | renderOptions: {map: map} | ||
+ | }); | ||
+ | var pStart = new BMapGL.Point(bounds.sw.lng, bounds.sw.lat); | ||
+ | var pEnd = new BMapGL.Point(bounds.ne.lng, bounds.ne.lat); | ||
+ | var bs = new BMapGL.Bounds(pStart, pEnd); | ||
+ | local.searchInBounds(configs.srchvalue, bs); | ||
+ | } | ||
+ | /** | ||
+ | * 点击搜索按钮 | ||
+ | */ | ||
+ | function seachResult() { | ||
+ | var value = document.getElementById('srchinput').value; | ||
+ | configs.srchvalue = value ? value : configs.srchvalue; | ||
+ | var city = document.getElementById('citySelect').value; | ||
+ | configs.city = city ? city : configs.city; | ||
+ | switch (configs.checkTab) { | ||
+ | case 0: | ||
+ | switchBoundry(); | ||
+ | break; | ||
+ | case 1: | ||
+ | switchNearby(); | ||
+ | break; | ||
+ | case 2: | ||
+ | switchViewport(); | ||
+ | break; | ||
+ | } | ||
+ | } | ||
</pre> | </pre> | ||
<div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div></div></div> | <div class="pre-btn"><div class="pre-btn-copy-and">复制</div><div class="pre-btn-cb-and">深色</div></div><div class="success">复制成功</div></div></div></div></div> |
2020年10月9日 (五) 15:13的版本
POI综合检索
功能场景
该示例展示了以“行政区划”、“周边”、“视野范围”三种类型的POI检索。
DEMO
https://mapopen-website-wiki.cdn.bcebos.com/wiki/android-loc-sdk/sdkgetAK.mov
POI综合检索
核心接口
类 | 接口 | 描述 | 参考文档 |
Boundary | bd.get(city,function) | 获取行政区域 | 暂无 |
Polygon | new BMapGL.Polygon(points,opts) | 多边形绘制行政区域 | 绘制点、线、面 |
Geocoder | geo.getPoint(city, function) | 根据城市获取地图范围 | 暂无 |
LocalSearch | local.search(srchvalue, point, 1000) | 检索 | 暂无 |
核心代码
/** * 行政区划内搜索 */ function switchBoundry() { function getBoundary() { var bdary = new BMapGL.Boundary(); bdary.get(configs.city, function (rs) { // 获取行政区域 map.clearOverlays(); var count = rs.boundaries.length; // 行政区域的点有多少个 if (count === 0) { alert('未能获取当前输入行政区域'); return; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMapGL.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: '#f00'}); // 建立多边形覆盖物 map.addOverlay(ply); pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); // 调整视野 }); } var geo = new BMapGL.Geocoder(); geo.getPoint(configs.city, function (point) { if (point) { var local = new BMapGL.LocalSearch(configs.city, { renderOptions: {map: map} }); local.search(configs.srchvalue, point, 1000); } else { console.log('选择的城市有误'); } }); setTimeout(function () { getBoundary(); }, 0); } /** * 周边搜索(圆形区域检索) */ function switchNearby() { map.clearOverlays(); var mylocation = new BMapGL.Geolocation(); mylocation.getCurrentPosition(function (rs) { if (this.getStatus() === BMAP_STATUS_SUCCESS) { map.clearOverlays(); map.panTo(rs.point); var point = rs.point; var circle = new BMapGL.Circle(point, 5000, { fillColor: 'blue', strokeWeight: 1, fillOpacity: 0.2, strokeOpacity: 0.3 }); map.addOverlay(circle); var local = new BMapGL.LocalSearch(point, { renderOptions: {map: map} }); local.searchNearby(configs.srchvalue, point, 5000); } }); } /** * 视野范围内搜索(矩形区域检索) */ function switchViewport() { map.clearOverlays(); var bounds = map.getBounds(); // 返回地图可视区域 var local = new BMapGL.LocalSearch(map, { renderOptions: {map: map} }); var pStart = new BMapGL.Point(bounds.sw.lng, bounds.sw.lat); var pEnd = new BMapGL.Point(bounds.ne.lng, bounds.ne.lat); var bs = new BMapGL.Bounds(pStart, pEnd); local.searchInBounds(configs.srchvalue, bs); } /** * 点击搜索按钮 */ function seachResult() { var value = document.getElementById('srchinput').value; configs.srchvalue = value ? value : configs.srchvalue; var city = document.getElementById('citySelect').value; configs.city = city ? city : configs.city; switch (configs.checkTab) { case 0: switchBoundry(); break; case 1: switchNearby(); break; case 2: switchViewport(); break; } }
复制
深色
复制成功