GIS(五)——完成js版搜狗地图基本交互搜索功能
最近在做的有关于北京海淀智慧旅游的一个项目,既然是旅游项目,那么涉及到地图的操作也就是必然的事情了。前几篇文章,主要是分享了在地图上标记多个景点及其景点信息的技术。其实跟项目中还是有一些不一样的。项目中要求实时显示景点的信息,根据实时数据,更新Marker的颜色(绿、橙、红),以及实时更新景点Brand上的景点信息(游客流量、舒适度)。这些都没有出现在文章中,文章只是从技术的角度来验证的。
今天主要要做的是地图上的一个基本功能——交互搜索。
其实官网上搜索的例子并不是很多,而且真的不怎么滴。不过作为参考,还是可以的。点击这里查看“范围查询-指定分类id,关键字”代码示例。如果没有你想要的功能,那你就去官方API文档中找吧,点击这里看搜索类API。
先贴出我的搜索也代码,很简单,一个输入框,一个搜索按钮:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>搜狗地图交互搜索</title>
<style type="text/css">
#map{position:absolute;width:1064px; height:550px;}
#result{position:absolute;top:30px;left:1064px;width:300px;}
</style>
<script type="text/javascript" src="http://api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1-rc2/jquery.min.js"></script></script>
</head><body οnlοad="initialize()"><input type="text" class="kw" οnkeydοwn="if(event.keyCode == '13') search_center();"/><input type="button" οnclick="search_center()" value="搜索" /><div id="map" class="map_map"></div><div id="result"></div>
</body>
</html>
既然是地图,肯定缺少不了初始化地图的代码:
var map;//地图
var markers;//数组:结果标记
var sRender;//搜索渲染对象//初始化
function initialize(){var myLatLng = new sogou.maps.Point(12939000,4840250);var myOptions = {zoom: 10,center: myLatLng,mapControlType:5};map = new sogou.maps.Map(document.getElementById("map"), myOptions);//创建地图sRender=new sogou.maps.SearchRenderer();//创建搜索渲染对象
}
既然是搜索,必须得有搜索的方法:
//搜索
function search_center(){var kw = $(".kw").val();search(null,kw);
}//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx//以下内容是根据指定内容,进行搜索定位//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//搜索位置(如酒店)
function search(classid,kw){clearMarker(sRender);//清除定位标记var request={'map':map,'what':{},'range':{'city':'北京'}};if(classid) request.what.classid=classid;if(kw) request.what.keyword=kw+",";var search=new sogou.maps.Search();//创建搜索实例sRender=new sogou.maps.SearchRenderer();//({'panel':document.getElementById('result')});//创建搜索渲染对象search.search(request,callback); //执行搜索search.setRenderer(sRender);//渲染搜索结果
}
每次搜索,都需要先清理原先的搜索记录:
//清除标记
function clearMarker(sRender){$("#result").children().remove();//清空查询列表sRender.clearResultFeatures();var m=sRender.getMarkers();if(m){//动态改变了数组的值,所以必须是倒着操作for(var i=m.length-1;m && i>=0;i--){m[i].setMap(null);m.pop();//将最后一个对象弹出}}
}
每次搜索完毕,重新定位中心点,我这里是获取第一个搜索结果,作为新的中心点:
//搜索完毕后的回调,这里重新设定中心点
function callback(result){setTimeout(getMarkers,500);
}//获取中心节点
function getMarkers(){markers = sRender.getMarkers();if(markers && markers.length>0){center = markers[0].options.feature.points[0];toCenter();//重新定位地图中心点}
}//定位中心
function toCenter(){map.setCenter(center)
}
js就这么多,值得注意的是,这一串儿的js,都要放到</body>后面。先来看看效果图吧:
- 初始化的js,其中map的初始化自然就不用说了,但是多了一个sRender对象,这是一个搜索渲染类对象,就是把搜索结果渲染到地图上。有兴趣的可以看看官方API文档;
- 搜索的js,主要是调用了Search 对象的search方法。搜索参数的设定请参考API文档;
- 清理的js,本来是只调用sRender对象的clearResultFeatures()方法的,结果执行后发现地图上的marker消失了,但是如果执行sRender.getMarkers(),却发现marker对象还在,只是不在地图上显示了。但是还是占用着资源呢。所以我就把这个marker全部从sRender对象中清除了。
- 最后一个是重新设置中心点的js,虽然地图会自动设定新的中心点,但是我们后面还要做周边搜索,必须先匹配最符合条件的结果作为中心进行区域搜索,所以这这里先把它做出来了。
sRender=new sogou.maps.SearchRenderer({'panel':document.getElementById('result')});
这个result就是页面上一个div的id。这样就会自动把结果放入到这个div中了。
GIS(五)——完成js版搜狗地图基本交互搜索功能相关推荐
- GIS(六)——实现js版搜狗地图周边搜索功能
在上一篇文章<GIS(五)--完成js版搜狗地图基本交互搜索功能>中,介绍了搜狗地图的关键字搜索功能,今天就实现以下另一个重要功能吧--那就是周边搜索功能. 按照惯例,还是把官网上的示例代 ...
- GIS(四)——为js版搜狗地图添加边界+Marker和Brand的最终美化版
在<GIS(三)--优化js版搜狗地图的brand标牌样式>中,分享了一下Brand样式的修改.现在把这几次Marker和Brand的修改统一再美化一下,算作一个终极优化版吧. 这次优化的 ...
- GIS(二)——在js版搜狗地图上添加brand标牌
在上一篇博文中,我在搜狗地图上添加了Marker标记,但是在用户体验度上还是不够的,如果想了解某些信息,你得把鼠标指向marker,才能看到title里的值.有没有一种可以直接显示在marker上的东 ...
- GIS(三)——优化js版搜狗地图的brand标牌样式
从上一篇博文的效果图中,我们看到有几个相近的brand标牌给相互遮挡住了,不能完整的显示.怎么处理一下呢?今天我们就来研究一下这个解决方案. 其实要想不被遮挡,可以让这几个brand位置变动一下,而不 ...
- 百度地图api周边搜索功能
利用百度地图api周边搜索功能,实现点击切换周边类型显示 <!DOCTYPE html> <html lang="zh-CN"> <head>& ...
- 经纬度计算距离html,js版谷歌地图计算两经纬度坐标点的距离
球面上两点间大圆劣弧的距离html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- android 高德地图之poi搜索功能的实现
二话不多说,先看效果 这个功能我是用Fragmentdialog里面做的,也遇到不少坑 第一,就是设置背景的drawable为纯白色导致键盘弹出的时候,recyclerview的布局被顶上去导致出现白 ...
- 高德js版地图在iOS15 beta版本卡死的问题
首先,如果你的js版高德地图在iOS15 beta卡死,那么错的不是你,错的是这个世界,咳咳,跑题了! 高德地图1.4.X版本在新版本iOS上会出现卡死的问题,并且非偶现,是必现的,这时,在求证了高德 ...
- html+抽奖游戏,九宫格抽奖HTML+JS版
div{ margin: 100px auto 0px; // 居中 width:500px; height:250px; border:3px solid black; // 边框 } li{ wi ...
最新文章
- matlab二值化图像_小白啃骨头之图像识别
- symbol lookup error
- linux安装没有root权限
- 软件测试方法之白盒测试与黑盒测试
- 国产数据库产业百花齐放 “1+4+4+N”格局形成
- oracle structure,oracle memory structure
- 方舟生存进化mysql_基于MySQL 的 SQL 优化总结_卡盟,辅助
- oracle可以只装客户端吗,我想在linux下只装oracle客户端行吗?怎么装?
- 绘制自己的人际关系图_如何系统的绘制自己的人际关系网络图?
- 使用Excel制作证件照之替换背景色
- linux环境下questasim 10.7的安装总结
- 【重点】心田花开|人教版小学一年级语文上册汉语拼音
- 通过安卓模拟器使直播软件obs的0粉丝用户开播
- 基于MATLAB-GUI数字图像的水果边缘检测
- 海思HI3516移植使用AP6181 BCM43362
- Java项目:SSM二手汽车交易商城网站管理系统
- 笔记本虚拟机 安装红旗linux x86,在红旗linux中安装vmware虚拟机
- 什么是TCP协议的三次握手四次挥手
- 4S汽车业务财务一体化整体框架
- OpenGL光和材质