![[ 小黑宅 ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmj8WPlai5Sm3WwgojjMZ6gskRvSKGQJoJLSBz9-7VBEBuc_zkmYiGRwSMmvUr9UYsit7rvEXLajK7U4NoPeoLCwOc8UdlUzkj6wx-m19KR_TAoVPMaPk_bvUSQxyQ-HltWbOjm2gEbk5I/s1600-r/logo.png){kind=logo}
前言
透過 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)
畫面
遇到問題
Q 按下 Update 後,畫面上直出 JavaScript 程式碼! 囧rz
A: 一開始以為是 主题：请问有人试过Rails2的ajax开发吗？ 主题：link_to_remote 的IE执行问题 ,卡了一天半.
今天一早頭腦清醒! 終於解掉! 原來是 View 裡頭的 link_to_remote 方法我指定了要更新的 Div 區段,就變成在畫面上直出 JavaScript 程式碼. 不指定才會真的將 JavaScript 程式碼寫進 HTML 中.
心得
網路應用程式...真的跟桌面應用程式很不一樣. -.. -
延伸閱讀:
0 則回應: