【高德地图API】从零开始学高德JSAPI(四)搜索服务—

【⾼德地图API】从零开始学⾼德JSAPI（四）搜索服务——POI搜索⾃动完成输

⼊提⽰⾏政。。。

摘要：地图服务，⼤家能想到哪些？POI搜素，输⼊提⽰，地址解析，公交导航，驾车导航，步⾏导航，道路查询（交叉⼝），⾏政区划等等。如果说覆盖物Marker是地图的⾻骼，那么服务，就是地图的⽓⾎。有个各种各样的地图服务，我们的地图应⽤才能变得有⾎有⾁，活灵活现。第四篇拆成了⼏个要点，本篇主要讲搜索服务。包括周边搜索，关键词搜索，范围搜索，搜索提⽰（⾃动完成，输⼊提⽰），⾏政区域，交叉路⼝，检索⾃有数据（云图）。

⽰意图1：⾃动完成，输⼊提⽰

⽰意图2：云图，⾃有数据检索，A-H图标显⽰，⿇点图

---------------------------------------------------------------------------------------

⼀、POI搜索

1、关键字查询

使⽤search⽅法，传⼀个关键词参数即可。

MSearch.search('东⽅明珠'); //关键字查询

完整代码：

//关键词查询

function placeSearch1() {

var MSearch;

mapObj.plugin(["AMap.PlaceSearch"], function() {

MSearch = new AMap.PlaceSearch({ //构造地点查询类

pageSize:10,

pageIndex:1,

city:"021" //城市

});

AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地点查询结果

MSearch.search('东⽅明珠'); //关键字查询

});

}

⽰意图：

2、输⼊提⽰

html部分：

</div>

JS部分：

在地图初始化时，添加【⾃动完成/输⼊提⽰】插件。

//加载输⼊提⽰插件

mapObj.plugin(["AMap.Autocomplete"], function() {html矩形框代码怎么写

//判断是否IE浏览器

if (navigator.userAgent.indexOf("MSIE") > 0) {

}

else {

}

});

输⼊提⽰部分：

//输⼊提⽰

function autoSearch() {

var keywords = ElementById("keyword").value;

var auto;

var autoOptions = {

pageIndex:1,

pageSize:10,

city: "" //城市，默认全国

};

auto = new AMap.Autocomplete(autoOptions);

//查询成功时返回查询结果

AMap.event.addListener(auto, "complete", autocomplete_CallBack);

auto.search(keywords);

}

⽰意图：

3、周边查询

使⽤searchNearBy⽅法，需要传⼊关键词，中⼼点经纬度，搜索半径。

MSearch.searchNearBy("酒店", cpoint, 500);

全部代码：

//周边查询函数

var cpoint = new AMap.LngLat(116.405467,39.907761); //搜索查询的中⼼点设置

function placeSearch2() {

var MSearch;

//加载服务插件，实例化地点查询类

mapObj.plugin(["AMap.PlaceSearch"], function() {

MSearch = new AMap.PlaceSearch({

city: "北京"

});

//查询成功时的回调函数

AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);

//周边搜索

MSearch.searchNearBy("酒店", cpoint, 500);

});

}

⽰意图：

4、可视区域查询

5、范围内查询

范围内查询，可以是多边形，可以是圆形，也可以是矩形。

我们在这⾥，⽤⼀个矩形搜索来举例。

使⽤searchInBounds⽅法，传⼊关键词，与范围即可。

MSearch.searchInBounds("酒店", new AMap.Bounds(arr[0], arr[2])); //范围查询

可视区域，就是视野内查询，这时可以获取整个可视区域，把这个区域传给范围内搜索即可。Bounds(); //获取可视区域范围

全部代码：

//范围内搜索-矩形

function placeSearch3(){

clearMap();

var arr = new Array();

var MSearch;

//绘制矩形边框

arr.push(new AMap.LngLat("116.423321","39.884055"));

arr.push(new AMap.LngLat("116.473103","39.884055"));

arr.push(new AMap.LngLat("116.473103","39.919348"));

arr.push(new AMap.LngLat("116.423321","39.919348"));

var polygon = new AMap.Polygon({

map:mapObj,

path:arr,

strokeColor:"#0000ff",

strokeOpacity:0.2,

strokeWeight:3,

fillColor: "#f5deb3",

fillOpacity: 0.8

});

mapObj.plugin(["AMap.PlaceSearch"], function() { //加载PlaceSearch服务插件

MSearch = new AMap.PlaceSearch({

pageSize: 8

}); //构造地点查询类

AMap.event.addListener(MSearch, "complete", Search_CallBack); //查询成功时的回调函数

MSearch.searchInBounds("酒店", new AMap.Bounds(arr[0], arr[2])); //范围查询

});

}

⽰意图：

6、道路查询（交叉⼝）

如果要查询北京的101国道，需要传参数‘101’和‘北京’。

//道路交叉⼝

function roadCrossSearchByRoadName(){

var roadname = '101';

var city2 = '北京';

var RoadSearchOption = {

number:10,//每页数量，默认10

batch:1,//请求页数，默认1

ext:""//扩展字段

};

var road = new AMap.RoadSearch(RoadSearchOption);

}

⽰意图：

7、⾃有数据检索（不需要数据库）

检索⾃有数据，是我的最爱。其实就是使⽤云图就好了。

新建地图

批量导⼊⾃有数据，或者⼿⼯添加⾃有数据。

显⽰云图层，需要获得⾃⼰的tableID：

//叠加云数据图层

function addCloudLayer() {

clearMap();

//加载云图层插件

mapObj.plugin('AMap.CloudDataLayer', function () {

var layerOptions = {

query:{keywords: ''},

clickable:true

};

cloudDataLayer = new AMap.CloudDataLayer('533ccc56e4b08ebff7d539eb', layerOptions); //实例化云图层类

cloudDataLayer.setMap(mapObj); //叠加云图层到地图

}

更多详细教程，可以查看：

通过云图的云检索功能，检索出⾃有数据中的“酒店”。并⽤图⽚为A-H的标注进⾏标⽰。

云检索：

function cloudSearch(){

var arr = new Array();

var search;

var searchOptions = {

keywords:'酒店',

orderBy:'_id:ASC'

};

//加载CloudDataSearch服务插件

mapObj.plugin(["AMap.CloudDataSearch"], function() {

search = new AMap.CloudDataSearch('5358f853e4b01214f369d851', searchOptions); //构造云数据检索类

AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查询成功时的回调函数

AMap.event.addListener(search, "error", errorInfo); //查询失败时的回调函数

search.searchNearBy(yunPoint, 10000); //周边检索

});

}

检索成功的回调函数：

function cloudSearch_CallBack(data) {

var resultStr="";

var resultArr = data.datas;

var resultNum = resultArr.length;

for (var i = 0; i < resultNum; i++) {

resultStr += "<div id='divid" + (i+1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i+1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:2px 0 4px 2px; border-bottom:1px solid #C1F resultStr += '地址：' + resultArr[i]._address + '<br/>类型：' + resultArr[i].type + '<br/>ID：' + resultArr[i]._id + "</td></tr></table></div>";

addmarker(i, resultArr[i]);

}

mapObj.setFitView();

}

添加Marker：

//添加marker&infowindow

function addmarker(i, d) {

var lngX;

var latY;

var iName;

var iAddress;

if(d.location){

lngX = Lng();

latY = Lat();

}else{

lngX = d._Lng();

latY = d._Lat();

}

if(d.name){

iName = d.name;

}else{

iName = d._name;

}

if(d.name){

iAddress = d.address;

}else{

iAddress = d._address;

}

var markerOption = {

map:mapObj,

icon:"webapi.amap/images/" + (i + 1) + ".png",

position:new AMap.LngLat(lngX, latY)

};

var mar = new AMap.Marker(markerOption);

marker.push(new AMap.LngLat(lngX, latY));

var infoWindow = new AMap.InfoWindow({

content:"<h3><font color=\"#00a6ac\">" + (i + 1) + ". " + iName + "</font></h3>" + pe, iAddress, d.tel),

size:new AMap.Size(300, 0),

autoMove:true,

offset:new AMap.Pixel(0,-30)

});

windowsArr.push(infoWindow);

var aa = function (e) {infoWindow.open(mapObj, Position());};

AMap.event.addListener(mar, "click", aa);

}

效果图：

全部源代码：

<!DOCTYPE HTML>

<html>

<head>

</head>

<ul>

<li>

<button onclick="javascript:cloudSearch();">检索⾃有酒店数据</button>

</li>

</ul>

</div>

</body>

var mapObj;

var marker = new Array();

var windowsArr = new Array();

var cloudDataLayer;

var MSearch;

//初始化地图对象，加载地图

function mapInit(){

mapObj = new AMap.Map("iCenter",{

center:new AMap.LngLat(116.397428,39.90923), //地图中⼼点

level:11 //地图显⽰的⽐例尺级别

});

AMap.event.addListener(mapObj,'click',getLnglat); //点击事件

}

//⿏标点击，获取经纬度坐标

function getLnglat(e){

var x = Lng();

var y = Lat();

}

function clearCloud(){

cloudDataLayer.setMap(null);

mapObj.clearMap();

}

//添加marker&infowindow

function addmarker(i, d) {

var lngX;

var latY;

var iName;

var iAddress;

if(d.location){

lngX = Lng();

latY = Lat();

}else{

lngX = d._Lng();

latY = d._Lat();

}

if(d.name){

iName = d.name;

}else{

iName = d._name;

}

if(d.name){

iAddress = d.address;

}else{

iAddress = d._address;

}

var markerOption = {

map:mapObj,

icon:"webapi.amap/images/" + (i + 1) + ".png",

position:new AMap.LngLat(lngX, latY)

};

var mar = new AMap.Marker(markerOption);

marker.push(new AMap.LngLat(lngX, latY));

var infoWindow = new AMap.InfoWindow({

content:"<h3><font color=\"#00a6ac\">" + (i + 1) + ". " + iName + "</font></h3>" + pe, iAddress, d.tel),

size:new AMap.Size(300, 0),

autoMove:true,

offset:new AMap.Pixel(0,-30)

});

windowsArr.push(infoWindow);

var aa = function (e) {infoWindow.open(mapObj, Position());};

AMap.event.addListener(mar, "click", aa);

}

//回调函数

function Search_CallBack(data) {

var resultStr = "";

var poiArr = data.poiList.pois;

var resultCount = poiArr.length;

for (var i = 0; i < resultCount; i++) {

resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C resultStr += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";

addmarker(i, poiArr[i]);

}

mapObj.setFitView();

}

function TipContents(type, address, tel) { //窗体内容

if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {

type = "暂⽆";

}

if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {

address = "暂⽆";

}

if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {

tel = "暂⽆";

}

var str = " ；地址：" + address + "<br /> ；电话：" + tel + " <br /> ；类型：" + type;

return str;

}

function openMarkerTipById1(pointid, thiss) { //根据id 打开搜索结果点tip

thiss.style.background = '#CAE1FF';

windowsArr[pointid].open(mapObj, marker[pointid]);

}

function onmouseout_MarkerStyle(pointid, thiss) { //⿏标移开后点样式恢复

thiss.style.background = "";

}

//输⼊提⽰框⿏标滑过时的样式

function openMarkerTipById(pointid, thiss) { //根据id打开搜索结果点tip

thiss.style.background = '#CAE1FF';

}

//输⼊提⽰框⿏标移出时的样式

function onmouseout_MarkerStyle(pointid, thiss) { //⿏标移开后点样式恢复

thiss.style.background = "";

}

var yunPoint = new AMap.LngLat(120.169144,30.293164);

//叠加云数据图层

function addCloudLayer() {

mapObj.setZoomAndCenter(14,yunPoint);

//加载云图层插件

mapObj.plugin('AMap.CloudDataLayer', function () {

var layerOptions = {

query:{keywords: ''},

clickable:true

};

cloudDataLayer = new AMap.CloudDataLayer('5358f853e4b01214f369d851', layerOptions); //实例化云图层类

cloudDataLayer.setMap(mapObj); //叠加云图层到地图

AMap.event.addListener(cloudDataLayer, 'click', function (result) {

var clouddata = result.data;

var infoWindowYun = new AMap.InfoWindow({

content:"<h3><font face=\"微软雅⿊\"color=\"#3366FF\">"+ clouddata._name +"</font></h3><hr />地址："+ clouddata._address + "<br />" + "创建时间：" + clouddata._createtime+ "<br />" + "更新时间：" + clouddata._updatetime, size:new AMap.Size(300, 0),

autoMove:true,

offset:new AMap.Pixel(0,-5)

});

infoWindowYun.open(mapObj, clouddata._location);

});

}

function cloudSearch(){

var arr = new Array();

var search;

var searchOptions = {

keywords:'酒店',

orderBy:'_id:ASC'

};

//加载CloudDataSearch服务插件

mapObj.plugin(["AMap.CloudDataSearch"], function() {

search = new AMap.CloudDataSearch('5358f853e4b01214f369d851', searchOptions); //构造云数据检索类

AMap.event.addListener(search, "complete", cloudSearch_CallBack); //查询成功时的回调函数

AMap.event.addListener(search, "error", errorInfo); //查询失败时的回调函数

search.searchNearBy(yunPoint, 10000); //周边检索

});

}

function cloudSearch_CallBack(data) {

var resultStr="";

var resultArr = data.datas;

var resultNum = resultArr.length;

for (var i = 0; i < resultNum; i++) {

addmarker(i, resultArr[i]);

}

mapObj.setFitView();

}

//回调函数

function errorInfo(data) {

resultStr = data.info;

}

</script>

</html>

View Code

--------------------------------------------------------------------------------------------------------

【⼤家还想看到什么内容，可以留⾔给我】

下⼀篇预告：

⼆、地址解析

1、地址解析

2、逆地址解析

三、导航规划

1、公交导航

2、驾车导航

3、步⾏导航

四、定位

1、浏览器定位

2、IP定位

688IT编程网

【高德地图API】从零开始学高德JSAPI(四)搜索服务——POI搜索自动完成...

发表评论

推荐文章

随机森林算法介绍及R语言实现

基于随机森林优化的神经网络算法在冬小麦产量预测中的应用研究_百度文 ...

基于正则化贪心森林算法的情感分析方法研究

随机森林算法和grandientboosting算法

基于随机森林的图像分类算法研究

热门文章

随机森林特征选择原理

自动驾驶系统中的随机森林算法解析

随机森林算法及其在生物信息学中的应用

监督学习中的随机森林算法解析(六)

随机森林算法在数据分析中的应用

机器学习——随机森林,RandomForestClassifier参数含义详解

随机森林的算法

随机森林算法作用

监督学习中的随机森林算法解析(十)

随机森林算法案例

随机森林案例

二分类问题常用的模型

绘制ssd框架训练流程

一种基于信息熵和DTW的多维时间序列相似性度量算法

SVM训练过程范文

如何使用支持向量机进行股票预测与交易分析

二分类交叉熵损失函数binary

tinybert_训练中文文本分类模型_概述说明

基于门控可形变卷积和分层Transformer的图像修复模型及其应用

人工智能开发技术的测试和评估方法

最新文章

基于随机森林的数据分类算法改进

人工智能中的智能识别与分类技术

基于人工智能技术的随机森林算法在医疗数据挖掘中的应用

随机森林回归模型的建模步骤

r语言随机森林预测模型校准曲线

《2024年随机森林算法优化研究》范文

标签列表

688IT编程网

【高德地图API】从零开始学高德JSAPI(四)搜索服务——POI搜索自动完成...

发表评论

推荐文章

随机森林算法介绍及R语言实现

基于随机森林优化的神经网络算法在冬小麦产量预测中的应用研究_百度文 ...

基于正则化贪心森林算法的情感分析方法研究

随机森林算法和grandientboosting算法

基于随机森林的图像分类算法研究

热门文章

随机森林特征选择原理

自动驾驶系统中的随机森林算法解析

随机森林算法及其在生物信息学中的应用

监督学习中的随机森林算法解析(六)

随机森林算法在数据分析中的应用

机器学习——随机森林,RandomForestClassifier参数含义详解

随机森林 的算法

随机森林算法作用

监督学习中的随机森林算法解析(十)

随机森林算法案例

随机森林案例

二分类问题常用的模型

绘制ssd框架训练流程

一种基于信息熵和DTW的多维时间序列相似性度量算法

SVM训练过程范文

如何使用支持向量机进行股票预测与交易分析

二分类交叉熵损失函数binary

tinybert_训练中文文本分类模型_概述说明

基于门控可形变卷积和分层Transformer的图像修复模型及其应用

人工智能开发技术的测试和评估方法

最新文章

基于随机森林的数据分类算法改进

人工智能中的智能识别与分类技术

基于人工智能技术的随机森林算法在医疗数据挖掘中的应用

随机森林回归模型的建模步骤

r语言随机森林预测模型校准曲线

《2024年随机森林算法优化研究》范文

标签列表

随机森林的算法