Google Map on Rails

文章分類： ,

前言

透過 YM4R 這個 RoR 的 Plug-in ,在 RoR 上使用 GoogleMap API 功能.

此篇主要是實作 YM4R 網頁範例 的實作過程 - 在網頁上顯示 Google Map , Map 上有一個可移動的 GMarker ,底下有一個 Update link ,透過此 link 以 AJAX 的方式更新 Map 上的 GMarker .

程式碼

Controller

show 方法負責初始化一個 Google Map 和 GMarker .

def show
  # placed inside a DIV of id map_div.
  @map = GMap.new("map_div") # 影響 View 中的 DIV id 名稱.

  # add controls.
  @map.control_init(:large_map => true,
    :map_type => true, 
    :overview_map => true)

  # set the center and the zoom.
  @map.center_zoom_init([75.5,-42.56],4)

  # add a marker.
  @marker = GMarker.new([75.6, -42.467],
    :title => "Hello",
    :draggable => true,
    :info_window => "Info! Info!")
  @map.overlay_init(@marker)
end

update 方法連結 JavaScript 上 GMap 變數,並產生準備要更新的 GMarker .

def update
  # bind the Ruby @map variable to the JS variable map,
  # which already exists in the client browser.
  # map is by default the name given to a map created from YM4R/GM
  # (this could be overriden by passing a second argument to
  # the GMap constructor).
  @map = Variable.new("map")

  # create a marker.
  @marker =
    GMarker.new([75.89,-42.767],
    :title => "Update",
    :info_window => "I have been placed through RJS")
end

View

Layout 部份在 Header 區段產生 Google Map 所需要的 JavaScript 的程式碼(ex: GoogleMap Key...) 和 將 "在 Controller 中 show 方法內 @map 變數" 轉換成 JavaScript 程式碼.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Posts: <%= controller.action_name %></title>
  <%= javascript_include_tag :all , :cache => true %>
  <%= stylesheet_link_tag 'scaffold' %>

  <!-- output the header, used by all the maps of the page: It includes the Google Maps API JS code and the JS helper functions of YM4R/GM. -->
  <%= GMap.header %> 

  <!-- initialize the map. -->
  <%= @map.to_html %>
</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>

<%= yield  %>

</body>
</html>

show.html.erb 負責產生 Google Map 在 HTML 放置的區段 和 提供一個更新 Google Map 的連結.

<!- 產生一個放置 Google Map 的 DIV 區段. __>
<%= @map.div(:width => 600, :height => 400) %>

<!-- 產生更新 Google Map 的連結(使用 AJAX 方式).
:update => '取代的div名稱', :url => "呼叫的方法" -->
<%= link_to_remote('Update', {:url => { :action => "update" }}) %>

update.rjs 負責清除 Google Map 上的物件 並 放入一個新的 GMarker(在 Controller 的 update 中產生).

# clear the map of all overlays.
page << @map.clear_overlays

# Then I add the marker.
page << @map.add_overlay(@marker)

畫面

GMonRoR_before

GMonRoR_after

遇到問題

Q 按下 Update 後,畫面上直出 JavaScript 程式碼! 囧rz

A: 一開始以為是 主题：请问有人试过Rails2的ajax开发吗？ 主题：link_to_remote 的IE执行问题 ,卡了一天半.

今天一早頭腦清醒! 終於解掉! 原來是 View 裡頭的 link_to_remote 方法我指定了要更新的 Div 區段,就變成在畫面上直出 JavaScript 程式碼. 不指定才會真的將 JavaScript 程式碼寫進 HTML 中.

心得

網路應用程式...真的跟桌面應用程式很不一樣. -.. -

延伸閱讀:

0 則回應:

訂閱： 張貼留言 (Atom)