【高德地图API】从零开始学高德JS API（四）搜索服务
我的图书馆
【高德地图API】从零开始学高德JS API（四）搜索服务
摘要：地图服务，大家能想到哪些？POI搜素，输入提示，地址解析，公交导航，驾车导航，步行导航，道路查询（交叉口），行政区划等等。如果说覆盖物Marker是地图的骨骼，那么服务，就是地图的气血。有个各种各样的地图服务，我们的地图应用才能变得有血有肉，活灵活现。第四篇拆成了几个要点，本篇主要讲搜索服务。包括周边搜索，关键词搜索，范围搜索，搜索提示（自动完成，输入提示），行政区域，交叉路口，检索自有数据（云图）。
示意图1：自动完成，输入提示
示意图2：云图，自有数据检索，A-H图标显示，麻点图
---------------------------------------------------------------------------------------
一、POI搜索
1、关键字查询
使用search方法，传一个关键词参数即可。
MSearch.search('东方明珠'); //关键字查询
完整代码：
//关键词查询
function placeSearch1() {
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 class="autoclass"&
&input type="text" id="keyword" name="keyword" value="" style="width: 95%;"/&
&div id="result1" class="autobox" name="result1"&&/div&
在地图初始化时，添加【自动完成/输入提示】插件。
//加载输入提示插件
mapObj.plugin(["AMap.Autocomplete"], function() {
//判断是否IE浏览器
if (navigator.userAgent.indexOf("MSIE") & 0) {
document.getElementById("keyword").onpropertychange = autoS
document.getElementById("keyword").oninput = autoS
输入提示部分：
//输入提示
function autoSearch() {
var keywords = document.getElementById("keyword").
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..907761); //搜索查询的中心点设置
function placeSearch2() {
//加载服务插件，实例化地点查询类
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])); //范围查询
可视区域，就是视野内查询，这时可以获取整个可视区域，把这个区域传给范围内搜索即可。
mapObj.getBounds(); //获取可视区域范围
全部代码：
//范围内搜索-矩形
function placeSearch3(){
clearMap();
var arr = new Array();
//绘制矩形边框
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,
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);
road.roadCrossSearchByRoadName(roadname,city2,roadCrossSearch_CallBack);
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 searchOptions = {
keywords:'酒店',
orderBy:'_id:ASC'
//加载CloudDataSearch服务插件
mapObj.plugin(["AMap.CloudDataSearch"], function() {
search = new AMap.CloudDataSearch('b1', 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.
var resultNum = resultArr.
for (var i = 0; i & resultN i++) {
resultStr += "&div id='divid" + (i+1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i+1) + ",this)' style=\"font-size: 12cursor:padding:2px 0 4px 2 border-bottom:1px solid #C1FFC1;\"&&table&&tr&&td&&h3&&font face=\"微软雅黑\"color=\"#3366FF\"&" + (i+1) + "." + resultArr[i]._name + "&/font&&/h3&";
resultStr += '地址：' + resultArr[i]._address + '&br/&类型：' + resultArr[i].type + '&br/&ID：' + resultArr[i]._id + "&/td&&/tr&&/table&&/div&";
addmarker(i, resultArr[i]);
mapObj.setFitView();
document.getElementById("result").innerHTML = resultS
添加Marker：
//添加marker&infowindow
function addmarker(i, d) {
if(d.location){
lngX = d.location.getLng();
latY = d.location.getLat();
lngX = d._location.getLng();
latY = d._location.getLat();
if(d.name){
iName = d.
iName = d._
if(d.name){
iAddress = d.
iAddress = d._
var markerOption = {
map:mapObj,
icon:"/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 Window({
content:"&h3&&font color=\"#00a6ac\"&" + (i + 1) + ". " + iName + "&/font&&/h3&" + TipContents(d.type, 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, mar.getPosition());};
AMap.event.addListener(mar, "click", aa);
全部源代码：
TA的推荐TA的最新馆藏
喜欢该文的人也喜欢问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
这个问题已被关闭，原因：问题质量差 - 问题太水、伸手党
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你可以在加载完成后手动执行下open。方法参见api：infoWindow.open(...);
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：}