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

先看效果：

在增加职位时，可以直接在地图上选取坐标
在职位详情页里，可以直接显示地图,并带上标注，可以拖动放大！
更好的体验，请大家去我的作品里浏览：【全栈小伙伴求职网】https://fullstack.xinshengdaxue.com/works/345

实做：

step1

执行：touch app/views/common/_baidumap_1.html

填入以下代码：

点击页面进去复制: https://github.com/activeliang/baidumapdemo/blob/master/app/views/common/_baidumap_1.html.erb

执行：touch app/views/common/_baidumap_2.html.erb

填入：

点击页面进去复制：https://github.com/activeliang/baidumapdemo/blob/master/app/views/common/_baidumap_2.html.erb

执行 rails g migration add_map_detail_to_job cp_lng:string cp_lat:string然后rake db:migrate这一步将会在你的job里新增两个存位置信息的栏位。

step2

去到app/views/layouts/application.html.erb在<head></head>里，填入以下代码：

1	<script src="https://api.map.baidu.com/api?v=2.0&ak=fitXUIqC5oHoWvnUhd4PwtHlbMb22AvH&s=1" type="text/javascript"></script>

去到app/views/jobs/new.html.erb的simple_form当中，填入：

1
2
3

<%= f.text_field :cp_lat, :id => "maplat", :type => "hidden" %>
<%= f.text_field :cp_lng, :id => "maplng", :type => "hidden" %>
<%= render "common/baidumap_1" %>

去到app/views/jobs/show.html.erb的任何你想插入地图的位置，填入：

1	<%= render "common/baidumap_2" %>

step3

为了让地图用到的js更稳定地工作，我们去把Turnolinks拆掉！

去到app/assets/javascripts/application.js 把//=requireturnolinks 删掉。
去到Gemfile 里，把gem 'turbolinks', '~> 5' 删掉，然后bundle install

(这一步我已经帮你做了，你可以直接用我的ak，直接跳过。)

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

完工！

以下是解说：

运作：

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

进阶：

可以增加地图缩略图 地图比例尽 地图缩放条 设置地图背影模式 在这里不多说，有兴趣请看官方文档：http://lbsyun.baidu.com/index.php?title=jspopular

遇到的坑：

部署heroku后，地图失效！
原因：网上绝大部分教程都没有提到一个问题：https模式下，密钥后要加上一个字段。具体：http://lbsyun.baidu.com/index.php?title=jspopular

希望你5票投我1票：

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