58同城高德搜房项目JS相关知识
在线地址:58同城品牌公寓高德搜房
Github地址:https://github.com/liguobao/58HouseSearch
知乎专栏(点赞用的):高德API+Python解决租房问题(.NET版)
经过了一个星期的修补补,以及小伙伴风险的代码,整个项目基本处于基本稳定运行的状态。
同时加入了一下新功能:
- IP定位:调用高德地图IP定位功能实现
- 移动地图中心定位:调用高德地图移动地图定位实现
- 定位城市名转58同城城市名以获得准确58同城城市域名:抓取58同城城市分类信息
- 优化数据源、去除广告数据:小伙伴奉献代码
今天主要简单讲解一下其中使用的一些高德地图API接口。
高德地图JavaScript API 主体为map对象,基本所有的操作都是通过map对象来实现的。
map对象实例化是通过 Amap类来做的。如以下代码:
1 | map = new AMap.Map("container", { |
IP定位
调用Map.CitySearch()获得当前IP所在城市,直接将地图显示成当前城市。代码如下:
1 | function showCityInfo(map) { |
移动地图自动中心定位
之前有一版是让用户输入城市名,然后直接定位到输入的城市的。
这个功能卡在了设置地图显示位置上,如果是使用高德地图提供的搜索控件的话,又存在输入结果之后搜索结果可能是多个的问题。而且这点我只是要取到用户想要定位的城市而已,感觉没必要做得太复杂。
昨晚在看高德地图API的时候发现,有一个移动地图获得地图中心所在位置的样例,马上眼前一亮了。这个功能比我想要的还要好…果断上。
1 | function MapMoveToLocationCity() |
整个代码的意思是,给map绑定一下移动时间,移动完了之后,调用getCity的方法获取当前地图中心所在城市信息。
这个时候要注意,城市名可能在city对象里面,也可能在province里面。
原因很简单:普通城市等级就是城市,我国还存在一个和省份一个等级的城市:直辖市。因此直辖市的城市名是在province里面的。
城市名匹配58同城地区域名
这个是上个版本(两三天前)的一个bug引出来的新功能。
上个版本是让用户输入城市名,然后提取城市名的中文拼音首字母作为58同城地区域名。如上海 =sh,广州=gz,北京=bj,成都=cd。
这个功能使用的是网上别人写的一个JS库,通过汉字匹配实现的。转换出来的数据没什么问题,不过我国汉字实在奥妙。
广州=gz,赣州=gz;
遂宁=sn;绥宁=sn;
惠州=hz,杭州=hz。
这样一来,上面这个做法就没法玩了。
想了下怎么解决这个问题,灵机一动。反正是在爬58的数据,这个城市名和城市域名数据58同城肯定有啊,然后找到了这个。
58同城城市分类导航
很明显,我要的所有城市名和城市域名都是里面了。
晚上和衣衣说了下,衣衣一大早就把处理好的json数据给我了。
于是来了下面一段代码:
1 |
|
高德地图自动补全功能
1 | <div class="control-input"> |
1 | var auto = new AMap.Autocomplete({ |
看方法前面也知道,其实这就是把ID为work-location的input初始化为地图插件,然后给Amap增加了一个监听事件。
当其中选中某一个数据的时候,触发workLocationSelected函数。效果如下:
在这里locationSelected是定位到所选位置,代码如下:
1 | function workLocationSelected(e) { |
至于导航功能代码我没怎么动,没去研究就不献丑了…
最后来个效果图。