【小伙伴分享】三步接入百度地图!为你的职位增加位置信息。

先看效果:
实做:
step1
  1. 执行:touch app/views/common/_baidumap_1.html

填入以下代码:

  1. 执行:touch app/views/common/_baidumap_2.html.erb

填入:

  1. 执行 rails g migration add_map_detail_to_job cp_lng:string cp_lat:string然后rake db:migrate这一步将会在你的job里新增两个存位置信息的栏位。
step2
  1. 去到app/views/layouts/application.html.erb<head></head>里,填入以下代码:
<script src="https://api.map.baidu.com/api?v=2.0&ak=fitXUIqC5oHoWvnUhd4PwtHlbMb22AvH&s=1" type="text/javascript"></script>
  1. 去到app/views/jobs/new.html.erbsimple_form当中,填入:
<%= f.text_field :cp_lat, :id => "maplat", :type => "hidden" %>
<%= f.text_field :cp_lng, :id => "maplng", :type => "hidden" %>
<%= render "common/baidumap_1" %>
  1. 去到app/views/jobs/show.html.erb的任何你想插入地图的位置,填入:
<%= render "common/baidumap_2" %>
step3
  1. 为了让地图用到的js更稳定地工作,我们去把Turnolinks拆掉!
  • 去到app/assets/javascripts/application.js//=requireturnolinks 删掉。
  • 去到Gemfile 里,把gem 'turbolinks', '~> 5' 删掉,然后bundle install
  1. (这一步我已经帮你做了,你可以直接用我的ak,直接跳过。)

去到百度地图开放平台 http://lbsyun.baidu.com/apiconsole/key 申请ak,然后把上面教程中的ak替换成自己的。百度地图ak免费易申请!

完工!
完工!

以下是解说:

运作:
  • 我们利用了js把获取到的经度lng,纬度lat,赋值给simple_form里两个待命的隐藏输入框。当我们新增数据时,这两个参数会跟随着表单一起存入数据库。
  • 我们在详情页面,把这两个参数调取出来赋给地图,地图就能清楚都显示该位置。
进阶:
遇到的坑:
希望你5票投我1票:

这是我的作品链接:【全栈小伙伴求职网】https://fullstack.xinshengdaxue.com/works/345

comments powered by Disqus