文档章节

GIS(五)——完成js版搜狗地图基本交互搜索功能

白志华
 白志华
发布于 2015/10/18 10:54
字数 1254
阅读 8
收藏 0

       最近在做的有关于北京海淀智慧旅游的一个项目,既然是旅游项目,那么涉及到地图的操作也就是必然的事情了。前几篇文章,主要是分享了在地图上标记多个景点及其景点信息的技术。其实跟项目中还是有一些不一样的。项目中要求实时显示景点的信息,根据实时数据,更新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 onload="initialize()">
  <input type="text" class="kw" onkeydown="if(event.keyCode == '13') search_center();"/>
  <input type="button" onclick="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>后面。先来看看效果图吧:


       简单说一下,
  1. 初始化的js,其中map的初始化自然就不用说了,但是多了一个sRender对象,这是一个搜索渲染类对象,就是把搜索结果渲染到地图上。有兴趣的可以看看官方API文档
  2. 搜索的js,主要是调用了Search 对象的search方法。搜索参数的设定请参考API文档;
  3. 清理的js,本来是只调用sRender对象的clearResultFeatures()方法的,结果执行后发现地图上的marker消失了,但是如果执行sRender.getMarkers(),却发现marker对象还在,只是不在地图上显示了。但是还是占用着资源呢。所以我就把这个marker全部从sRender对象中清除了。
  4. 最后一个是重新设置中心点的js,虽然地图会自动设定新的中心点,但是我们后面还要做周边搜索,必须先匹配最符合条件的结果作为中心进行区域搜索,所以这这里先把它做出来了。
       如果想把搜索结果以列表的形式显示出来,只要修改一下sRender对象的创建即可:
sRender=new sogou.maps.SearchRenderer({'panel':document.getElementById('result')});
       这个result就是页面上一个div的id。这样就会自动把结果放入到这个div中了。
       到此搜索功能就基本上完成了。接下来做一下周边搜索的功能。最后再美化一版基本上的思路就是这个样子,大家多多指点吧。

版权声明:本文为博主原创文章,未经博主允许不得转载。

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/39503017

共有 人打赏支持
白志华
粉丝 31
博文 265
码字总数 57524
作品 0
长沙
程序员
私信 提问
各家地图公司地图开发API比较

各家地图公司地图开发API比较 一、谷歌地图API地址:http://code.google.com/apis/maps/ 基于Google Maps,能够使用 JavaScript 将 Google Maps 嵌入网页中。API 提供了大量实用工具用以处理...

睡得
2015/05/25
2.5K
5
用javascript调用搜狗地图实现景点的显示

由于课程需要,最近做了搜狗地图服务的接入工作,要在地图上标注出景点位置,现略做总结,以备查阅。(部署该服务到Tomcat中的时候中文总是乱码,纠结了半天,最后不得不show in Eclipse) ja...

walk273
2013/05/28
0
0
Mapbox GL JS 0.50.0 发布,添加用户自定义图层

WEB GIS 开发框架 mapbox-gl-js v0.50.0 发布了,Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大量的...

h4cd
10/13
479
0
掌握这11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
06/26
0
0
WEB GIS 开发框架 mapbox-gl-js v0.44.2 发布

WEB GIS 开发框架 mapbox-gl-js v0.44.2 发布。 Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大量的地...

h4cd
04/05
613
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
今天
1
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
今天
4
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
3
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
17
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部