高德地图 AMap.PlaceSearch

news/2024/11/25 8:42:12/

AMap.PlaceSearch

地点搜索服务,提供某一特定地区的位置查询服务。PlaceSearch构造函数的参数为可选,表达为参数对象PlaceSearchOptions。PlaceSearchOptions允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息。

高德地图为我们提供了某一地区的查询服务,通过该插件我们可以查询某一地区的服务位于说明地方,比方说我想区喝杯奶茶,这时候我们就可以通过该插件来定位附近的奶茶店有多少家了。

eg

<!doctype html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><style type="text/css">body,html{height: 100%;margin: 0px;}#container{height: 50%;margin: 0px;}#result{height: 50%;margin: 0px;}</style><title>快速入门</title></head><body><div id="container" tabindex="0"></div><div id="result"></div><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=mykey"></script><script type="text/javascript">var map = new AMap.Map('container', {resizeEnable: true,center:[116.519942, 39.924677],zoom:11});AMap.service('AMap.PlaceSearch',function(){//回调函数//实例化PlaceSearchplaceSearch= new AMap.PlaceSearch({pageSize: 5,//每页显示多少行pageIndex: 1,//显示的下标从那个开始type:'餐饮服务',//类别,可以以|后面加其他类city: "010", //城市map: map,//显示地图panel: "result"//服务显示的面板});//TODO: 使用placeSearch对象调用关键字搜索的功能placeSearch.search('公园', function(status, result) {});})</script></body>
</html>

效果图
这里写图片描述

应用场景
直接使用服务返回的数据,构造的option中不写map和panel属性,在search方法中传入回调函数,自己实现自己所想实现的效果图,如:

JavaScript
var placeSearch = new AMap.PlaceSearch({ //构造地点查询类pageSize: 5,pageIndex: 1,city: "010"//城市
});
//关键字查询
placeSearch.search('方恒', function(status, result) {//TODO:开发者使用result自己创建交互面板和地图展示
});

官方api

这里写图片描述
这里写图片描述
这里写图片描述
还有好多,想深入了解可以到高德官网自行了解
对于poi兴趣点来说,一般我们只拿一些比较基本的数据就行了,比如经纬度,城市编码,省份编码,电话,邮件等,如下:

console.log("建议城市名称:"+result.poiList.pois[0].name);console.log("poi所在省份:"+result.poiList.pois[0].pname);console.log("行政区编码:"+result.poiList.pois[0].adcode);console.log("poi所在省份编码:"+result.poiList.pois[0].pcode);console.log("poi所在城市编码:"+result.poiList.pois[0].citycode);console.log("电子邮箱:"+result.poiList.pois[0].email);console.log("邮编:"+result.poiList.pois[0].postcode);console.log("全局唯一ID:"+result.poiList.pois[0].id);console.log("poi所在城市名称:"+result.poiList.pois[0].cityname);console.log("poi所在行政区名称:"+result.poiList.pois[0].adname);console.log("地址:"+result.poiList.pois[0].address);console.log("电话:"+result.poiList.pois[0].tel);console.log("city name:"+result.poiList.pois[0].entr_location);//入口经纬度,POI点有出入口信息时返回,否则返回空字符串console.log("city name:"+result.poiList.pois[0].exit_location);//出口经纬度,POI点有出入口信息时返回,否则返回空字符串console.log("兴趣点经纬度:"+result.poiList.pois[0].location);//兴趣点经纬度

以上是开发中比较常见的信息

placeSearch.searchNearBy

周边搜索:对某一地区指定范围,进行搜索,如下显示了一个最基本的周边搜索案例

var map = new AMap.Map('container', {resizeEnable: true,center:[116.519942, 39.924677],zoom:11});AMap.service('AMap.PlaceSearch',function(){//回调函数//实例化PlaceSearchplaceSearch= new AMap.PlaceSearch({pageSize: 5,pageIndex: 1,children:1,type:'餐饮服务',city: "010", //城市map: map,panel: "result"});//TODO: 使用placeSearch对象调用关键字搜索的功能// placeSearch.search('奶茶', function(status, result) {//     for(var obj in result){//         console.log(obj);//     }// });placeSearch.searchNearBy("奶茶", [116.405467, 39.907761], 500, function(status, result) {if (status === 'complete' && result.info === 'OK') {//TODO : 解析返回结果,如果设置了map和panel,api将帮助完成点标注和列表}});})

如上给出了[116.405467, 39.907761]这个为中心点,500为半径,也就是说以[116.405467, 39.907761]这个中心点500米范围内进行搜索,如下所示

这里写图片描述

参考:高德官方文档


http://www.ppmy.cn/news/427036.html

相关文章

vue-amap 地图定位打卡

1、注册并登录高德开放平台 1、首先&#xff0c;注册开发者账号&#xff0c;成为高德开放平台开发者 2、登陆之后&#xff0c;在进入「应用管理」 页面「创建新应用」 3、为应用添加 Key 4、添加成功后&#xff0c;可获取到key值和安全密钥jscode&#xff08;自2021年12月02日升…

记一次高德地图引入 AMap is not defined 血坑

步骤&#xff1a; 1 在pubic文件夹下的index.html中引入高德地图的js文件 <script type"text/javascript" src"https://webapi.amap.com/maps?v2.0&key自己申请的key&pluginAMap.CitySearch"></script> 2 在methods中写一个获取位置…

vue-amap(vue 地图)

亲测可用&#xff0c;若有疑问请私信 官网&#xff1a;组件 | vue-amap 昨天把vue的地图&#xff08;高德&#xff09;搞了下&#xff1a; 步骤&#xff1a; 1.去高德开发者平台申请key&#xff1b; 2.安装vue-amap&#xff1b; 3.使用组件调用地图 1.npm安装vue-amapnpm ins…

MapboxMap 加载Amap地图图源

MapboxMap 展示Amap地图 MapBox添加切片图源RasterSourceRasterLayer展示Amap地图上图 MapBox添加切片图源 本文中 Amap切片图源 来源于网络。目的为学习研究&#xff01;如果商用请注意版权问题。 功能实现主要借助RasterSource与RasterLayer。 RasterSource 栅格源&#x…

VUE——vue-amap简单使用

一、 down一个vue webpack的模板 vue init webpack vueamap根据提示完成模板下载&#xff0c;此处我的项目中选择router为yes 其他测试插件全为no vueamap为文件夹名称 模板下载后 安装依赖 cnpm install 依赖安装完成后 执行开发环境 npm run dev 若提示在"localhost…

在VUE中导入高德地图组件模块(vue-amap)

在VUE中导入高德地图组件模块 写在开头高德地图组件官方链接1、创建VUE项目2、在vue项目中导入高德地图组件3、修改地图尺寸4、最后效果5、写在结尾 写在开头 创建vue工程并将vue-amap导入到vue工程中 本文章参考 高德地图组件官方链接 vue-amap的guthub链接 高德开放平台官…

windowsapps文件夹可以删除吗_手机文件夹英文名称代表什么意思?哪些可以真正删除,涨见识了...

经常在网上看到有小伙伴问手机文件中的英文名称代表了什么意思&#xff1f;可以删除吗&#xff1f;当手机内存不够的时候&#xff0c;大家都会选择清理一些不需要保存的文件夹&#xff0c;但是往往在删除的时候都会误删一些数据&#xff0c;今天就来告诉大家手机文件夹究竟哪些…

安卓系统目录说明大全,各文件夹是什么,可以删除吗?(以MIUI为例)

由于安卓生态较为混乱&#xff0c;开发人员素质参差不齐&#xff0c;安卓手机的目录总是很混乱。有些像我一样有强迫症的人就喜欢清理一些没用的文件或文件夹&#xff0c;还自己手机一个清净之所。 而且在卸载一些app之后&#xff0c;可能还会在手机里残存一下文件夹或者垃圾文…