仿链家地图找房的简单实现

作者 : 开心源码 本文共5897个字,预计阅读时间需要15分钟 发布时间: 2022-05-11 共67人阅读

本篇目录:

  • 用入门
    • 简单用流程
  • 链家地图找房效果
    • 区域点位气泡
      • 数据结构
      • 实现
      • addOverlay方法
    • 区域边界
    • 获取区域点位经纬度
    • 获取区域边界
  • 小结

最近因为项目需要,开始调研如何用百度地图实现相似于链家的地图找房的功可以,从而开始学习百度地图相关内容。后续会根据少量用到的知识点进行整理记录,以备不时之需吧。

用入门

图片描述图片形容

引使用百度地图开放平台里面的一个简单流程,需要使用户注册百度账号并且申请百度地图的开发者,之后需要获取自己的服务秘钥(ak),这个服务秘钥在实际开发过程中是需要用到的。至于开发者所需要的服务功可以在申请服务密钥时自行选择,这里不做统一说明。

简单用流程

  • 1.申请百度账号和ak

  • 2.准备页面
    根据HTML标准,每一份HTML文档都应该公告正确的文档类型,我们建议您用最新的符合HTML5规范的文档公告:

    <!DOCTYPE html>
  • 3.适应手机端页面展现
    下面我们增加一个meta标签,以便使您的页面更好的在移动平台上展现。

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  • 4.设置容器样式
    这个,就根据自己的需要来吧~~~

  • 5.引使用百度地图API文件

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

    开头时申请的服务密钥这会就有使用了。

  • 6.创立地图容器元素

    <div id="container"></div> 

    地图需要一个HTML元素作为容器,这样才可以展示到页面上。这里我们创立了一个div元素。

  • 7.创立地图实例

    var map = new BMap.Map("container"); 

    注意:
    1.在调使用此构造函数时应确保容器元素已经增加到地图上。
    2.命名空间 API用BMap作为命名空间,所有类均在该命名空间之下,比方:BMap.Map、BMap.Control、BMap.Overlay。

  • 8.设置中心点坐标

    var point = new BMap.Point(116.404, 39.915); 

    请注意:在用百度地图JavaScript API服务时,需用百度BD09坐标,如用其余坐标( WGS84、GCJ02)进行展现,需先将其余坐标转换为BD09,详细说明请参考坐标转换说明,请勿用非官方的转换方法!!!

  • 9.地图初始化,同时设置地图展现级别

    map.centerAndZoom(point, 15);  

    在创立地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必需经过初始化才能执行其余操作。

好的,通过上面的9个步骤我们就可以简单的通过调使用百度地图JavaScript API来创立一个简单的地图组件了。

链家地图找房效果

以链家租房为例,基本效果如下:

图片描述图片形容

通过上图能看出,我们实现的功可以很简单,划分区域并且将区域内的数据以气泡的形式在地图上面显示出来。

我们需要实现的内容能分为以下四个部分:

  • 区域点位气泡
  • 区域边界
  • 获取区域点位经纬度
  • 获取区域边界

接下来我们从上面四个角度来逐一分解:

区域点位气泡

数据结构

先让我们来看一下,对应每一个区域气泡的数据格式是怎样样的。

{    "id": 23008626,    "name": "西城",    "longitude": 116.36960374452,    "latitude": 39.910041817755,    "border": "116.33966497518,39.943764592525;116.3411097524,39.928597618389;116.341315,39.904264;116.344854,39.904291;116.344935,39.903046;116.335774,39.90304;116.33580482633,39.899337316133;116.33242753154,39.899040029285;116.33245527539,39.898197950347;116.33283394656,39.895693053733;116.330977,39.895485;116.330926,39.89293;116.330212,39.892899;116.330222,39.891257;116.33024,39.890212;116.327698,39.890115;116.327761,39.88071;116.329557,39.880786;116.331408,39.880675;116.333043,39.880578;116.333869,39.880564;116.334354,39.88062;116.334696,39.880661;116.336259,39.880772;116.337139,39.880869;116.337606,39.880897;116.337929,39.880952;116.338145,39.881256;116.339457,39.881312;116.340858,39.881326;116.34375,39.881464;116.346194,39.881589;116.347631,39.88163;116.34835,39.881547;116.349571,39.881409;116.350578,39.881326;116.351063,39.881243;116.351386,39.881132;116.351278,39.880357;116.351314,39.879582;116.353811,39.879582;116.356363,39.879568;116.35665,39.878294;116.356884,39.877007;116.357369,39.87446;116.40572867625,39.878578727299;116.4047580463,39.892972104486;116.40452597879,39.901901880113;116.40441622959,39.906532832082;116.40257282982,39.906507681183;116.4020196152,39.913804303627;116.39828683227,39.913832594783;116.39725265797,39.928722718426;116.40581966266,39.929770411996;116.40568598304,39.934729286107;116.40295669491,39.934655327476;116.40254832882,39.939804012204;116.40231814784,39.946463810438;116.40155209008,39.94695247551;116.40049657642,39.94705131884;116.4001439975,39.954900233487;116.39984559727,39.963429984507;116.39296272069,39.962975952981;116.39373616852,39.965896570349;116.39437,39.969363;116.398806,39.969503;116.398806,39.974093;116.398806,39.974991;116.399679,39.977101;116.400523,39.979367;116.387534,39.978897;116.389959,39.974502;116.37665910912,39.973917456809;116.37842636561,39.95481641918;116.36316310982,39.949597406824;116.362735,39.952795;116.361208,39.952753;116.360965,39.953521;116.360732,39.955699;116.362744,39.955602;116.36200826406,39.957387484274;116.35838467559,39.956443466213;116.35758831682,39.952823154673;116.35883299579,39.94855433968;116.35352531625,39.94923292836;116.34933548622,39.948951148112;116.34882794641,39.944143030672",    "count": 1870}

在上面的数据格式中,共有以下几个字段值:

  • id 区域的id值
  • name 区域名称
  • longitude 区域气泡的中心经度值
  • latitude 区域气泡的中心纬度值
  • border 区域的边界关键点的经纬度值
  • count 资源数量

实现

在说道气泡的时候就不得不提,百度地图提供的覆盖物相关的API,请看下图:

图片描述图片形容

能看出,百度地图支持不同类型不同功可以的覆盖物功可以。而后根据我们结果图的效果来看,我们选择用Label来实现。主要是由于气泡显示的信息均为文本形式,无需其余的附加功可以;Label的内容支持HTML,这样简单地样式设置也满足了。

先来看一下Label的参数说明:

图片描述图片形容图片描述图片形容

对于实例内容,我们能定义一个模板来用

<div class="bubble bubble-1" data-xftrack="10144" data-longitude="#{longitude}" data-latitude="#{latitude}" data-id="#{id}"><p class="name" title="#{name}">#{name}</p><p><span class="count">#{count}</span>个资源</p></div>

而后让我们来创立一个Label

var Label = new BMap.Label($.replaceTpl(tpl, data), {    position: new BMap.Point(data.longitude, data.latitude),    offset: BMap.Size(-46, -46)})

其中,data是我们上面定义的一个数据结构,tpl是我们定义的模板字符串。replaceTpl是自己设置的使用来替换模板字符串中字段值内容的工具函数,实现方法大家能自行脑补。

参数部门,首先根据数据结构中的中心经纬度值,取得Label的地理位置,offset是Label的位置偏移值。这样通过上面的方法和我们的数据结构即可以取得一个Label的气泡。

而后我们也能通过Label提供的方法来调整Label。比方

label.setStyle(styleObject)

其余少量方法请参照:

图片描述图片形容

addOverlay方法

上面创立了一个Label实例之后发现地图上面并没有出现我们预期的效果,这是由于我们还需要用地图组件的addOverlay方法将覆盖物增加到地图上面

map.addOverlay(label)

区域边界

在地图上面区域的边界其实能了解为在地图上面的固定区域描画一个多边形,这样即可以知道我们需要用到的是百度地图中的多边形功可以Polygon。

表示地图上的多边形。多边形相似于闭合的折线,另外您也能为其增加填充颜色

var polygon = new BMap.Polygon(borderData, {    strokeWeight: 2,    strokeColor: "#4285f4",    strokeOpacity: 1,    fillOpacity: .1,    enableMassClear: !1});

上面是我们这次中的一个简单的多边形实例,其中borderData能参照上面数据结构中的border字段。我们能来看一下官方给出的定义

图片描述图片形容

能看出主要有两部分参数构成,一部分是多边形关键点的点位数组,一部分是设置参数,具体参照下图

图片描述图片形容

当然,在创立完一个多边形实例之后不要不记得增加到地图上面啊

map.addOverlay(polygon)

获取区域点位经纬度

当我们知道了一个市区有哪些区域后,我们该如何来获取对应这个区域的一个点位的经纬度呢?我们能通过百度地图提供的BMap.Geocoder来获取点位信息

Geocoder:地址解析,提供将地址信息转换为坐标点信息的服务。

地理编码可以够将地址信息转换为地理坐标点信息。

百度地图API提供Geocoder类进行地址解析,您能通过Geocoder.getPoint()方法来将一段地址形容转换为一个坐标。在下面的示例中,我们将取得地址“北京市海淀区”的地理坐标位置。注意在调使用Geocoder.getPoint()方法时您需要提供地址解析所在的城市(本例为“北京市”)。

var myGeo = new BMap.Geocoder();      // 将地址解析结果显示在地图上,并调整地图视野    myGeo.getPoint("北京市海淀区", function(point){        if (point) {           // 创立点位标识     // point {lng, lat} 点位的经纬度值  }      }, "北京市");

附官方说明:

图片描述图片形容

获取区域边界

上面我们获取到了区域的点位信息,那么我们怎样可以够获取到这个区域的边界信息呢?同样的,百度地图提供给了我们API能来用:BMap.Boundary

百度地图API提供Boundary类进行地址解析,您能通过Boundary.get()方法来将一段地址形容转换为一系列边界关键点的经纬度字符串。在下面的示例中,我们将取得地址“北京市海淀区”的地理区域。

var bdary = new BMap.Boundary();bdary.get("北京市海淀区", function(rs) { //获取行政区域    console.error(rs);});

附官方说明:

图片描述图片形容

小结

其实相似于链家地图找房的实现并没有我们想象的那么复杂,少量关键的实现百度地图都给我们提供了可使用的接口,尽管有些接口的数据会有肯定的出入,但是基本的少量功可以的实现我们是能通过用这些接口来实现的。后续会整理一个完整的Demo进行分享。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 仿链家地图找房的简单实现

发表回复