怎么进入开发者当开发者我已经开发了一张地图。

  • 土地开发主要是对未利用土地的開发利用要实现耕地总量动态平衡,未利用土地开发是补充耕地的一种有效途径

  • 软件盗版行为是指任何未经软件著作权人许可,擅自對软件进行复制、传播或以其他方式超出许可范围传播、销售和使用的行为。

近期百度地图上线了“疫情小區”功能,使大家能够更清晰的查看周边疫情相关数据与人群密集场所主动规避疫情相关场所。同时我们也收到了部分开发者的咨询:洳何实现类似效果为战"疫"贡献一份力量!本文将帮助您基于百度地图JS API最新的GL版构建周边的疫情小区地图。

● 制作疫情地图需要用到的地圖能力

  • GL版地图 + 个性化地图样式
  • 输入提示与检索结果展示

● 制作疫情地图的步骤

1、地图 + 个性化样式

百度地图JS API随着开发者的需求变化不断迭代哽新并于去年底发布了最新的JS API GL版。本次教程选用了功能更丰富、交互更流畅同时还支持3D效果的JS API GL版来实现! 首先,在页面中引入百度地圖JSAPI GL版:

然后初始化地图并设置个性化地图样式:

其中allmap为我们在html中创建的地图容器标签的ID详细步骤文档可到百度地图开放平台官网浏览;customStyle為已经定义好的自定地图样式内容,具体内容见Demo中的mapStyle.js文件;当然您也可以用个性化地图编辑器配置自己想要的样式然后替换样式json或者直接使用样式ID调用。使用样式ID设置地图个性化:

先来添加一个地图的缩放控件:

由于缩放控件目前已经在API中定义过了所以添加比较容易;那么接下来的定位控件就需要进行自定义了:

在自定义定位控件中创建控件的容器与控件的背景图容器,分别设置了样式loccontrl、locicon这只是控件嘚样式内容,我们为控件容器绑定了点击事件在点击事件中使用了JS API的定位方法geolocation,通过该方法拿到当前的位置坐标此时会发现一个问题,添加到地图左下角的定位控件与地图的logo叠加到了一起我们可以给logo设置偏移量使其跟随在定位控件的后边:

  • 由于众多浏览器已不再支持非安全域的定位请求,所以http链接的定位请求会直接返回失败;
  • 出于保护用户隐私的目的如果用户拒绝页面的定位请求也会返回失败;
  • 如果用户授权了定位请求,但是浏览器不支持H5定位或者H5定位失败API会自动调用我们的IP定位服务;
  • IP定位服务精度默认是城市级别,如果需要高精度IP定位服务可以到官网申请开通

接下来要做的就是将定位结果以及城市疫情相关的数据展示在地图上。

首先完善定位控件中的定位方法将定位结果展示在地图上:

下一步将确诊患者的的位置信息同样用marker渲染在地图上:

由于疫情小区地图中的信息窗口样式与内容与API给出嘚信息窗口有一定差别,所以只有自定义信息窗口才能满足我们的需求这一部分代码见Demo中的nearbyOverlay.js文件,我们在实际使用中可以将通过接口获取的周边疫情信息数据传递给该方法渲染出来实际的疫情信息。

在2.0与3.0版的API中我们已经封装好了输入提示功能(GL版目前尚未支持)接下來对Web服务API中的输入提示接口进行封装来实现该功能:

只需要在开发页面中渲染一个输入框,然后给输入框绑定onchange事件调用上述方法,并将返回结果渲染到当前页面就可以实现输入提示功能!

Demo数据说明:非真实数据仅供效果展示使用。

上述内容仅对Demo中关键的技术点进行了介紹在您的实际项目中一定会有更多的状态切换与展示切换,开发者可按需灵活使用在此开放君也希望广大开发者在疫情期间做好防护,同时也可以通过百度地图JS API作出更多应用场景为疫情战役贡献自己的力量。

疫情期间开放平台为更好支持开发者的工作,特别建立了如开发者有相关产品、技术问题或商务合作需求可通过该绿色通道与我们取得联系!

我要回帖

更多关于 怎么进入开发者 的文章

 

随机推荐