討厭鬼教學

這次就教大家常在用的Google Map

很多地方都會用到這個功能~當然討厭鬼也用過

也不錯用，算是非常強大的套件

在這邊的教學~我會搭配struts2，所以請參考Struts2 架構配置教學

當然~要寫網頁也是要有一點底子的

你只要會簡單的javascript & jquery就可以了

當然簡單的html也是要會的

都好了以後就可以開始了~當然討厭鬼的action名稱會改一下

不會講index了~常寫code的人一定都知道命名一定要有意義

所以討厭鬼這邊就叫map.action

我的struts.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
"http://struts.apache.org/dtds/struts-2.1.7.dtd">

<struts>
    <package name="default" extends="struts-default">
        <action name="map" class="map.com.action.MapAction" method="map">
            <result name="success">/map/map.jsp</result>
        </action>
    </package>
</struts>

當然在上面設定相對應的地方要加上對應的檔案

而在jsp的部份~因為會用到一點jquery

所以要下載jquery的套件討厭鬼用的是jquery-1.7.2.min.js這個版本

因為是要做google map理所當然的要用到google的js套件

不過js沒有提供下載所以是用線上的https://maps.google.com/maps/api/js?sensor=true

要使用google map這個套件~在html中是用<div>這個物件

所以要在html中宣告一個div並給這個物件一個id

還有很重要的一點~如果沒加那很可能你永遠都看不到你的google map

那就是要給這個div物件長度跟寬度!!!!!!!

到了這邊配置的部份已經ok了~

接下來就是要將這個div初始化變成一個google map

在javasript中加入下列function

function initialize() {
    var myOptions = {
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    var pos = new google.maps.LatLng(24.9799050, 121.5404750);
    map.setCenter(pos);

}

zoom 是google map的縮放程度

mapTypeId 是使用的goole map的類型(可以上google看有哪幾種)

new google.maps.Map 這是建立一個google map 

setCenter是指這個map的中心位置在哪

然後在body的物件那邊加上onload="initialize();"

再將整個專案放到tomcat上面後

再輸入網址~就大功告成了~

當然這只是最基本的~

還有一些功能像是

你可以用中文去查位置

以及標記某幾個位置之類的

就等到下次再講吧~

因為討厭鬼快睡著了......