GoogleMap ： [Google Map]GMark事件运用(GEvent)

透过GEvent，我们可以让地图上的物件与网页元作互动，达到对使用者更友善的介面。

如本范例，当滑鼠移过(moveover)右侧的站名方块时地图中对应的marker会变红色，点(click)方块时地图会显示讯息视窗。
若滑鼠移过(moveover)地图中的marker相对应的站名方块也会变黄底突显。
当地图内marker太多时这个技巧特别有用。

GEvent
GEvent
.addListener
.trigger 触发地图内的事件
程式码
执行范例

/Files/Fooo/GoogleMapGEvent.rar

或如下源码：

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps (04) | Horn Network</title>
    <meta http-equiv=Pragma content=no-cache>
    <meta http-equiv=Cache-Control content=no-cache>
    <meta http-equiv=Cache-Control content=private>
    <meta http-equiv=Expires content=0>
    <style>.site {border:solid 1px #000000;padding-left:1em; display:block; width:60px;cursor:pointer;margin:5px;} </style>
    <script src="http://maps.google.com/jsapi?key=ABQIAAAAmIm9ZV1hQJ-pZ9ewUIrkMhS7AbjRHyuW1uOZxkKGPhcO4TQrsRSOuGLqTHRS-Xr8ZdxbUOndbM1LSg"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
var arySite = new Array();

function initialize() {
    // 檢查瀏覽器是否可使用 Google Map API
    if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
        // 設定地圖中心點
        map.setCenter(new GLatLng(25.036772,121.520269), 12);

addSite(map,4,'新店',24.978889,121.529167,'台北縣新店市三民路36號',40,23,'懸浮微粒',0);
addSite(map,5,'土城',24.981667,121.451667,'台北縣土城市學府路一段241號',40,26,'懸浮微粒',0);
addSite(map,6,'板橋',25.012778,121.459167,'台北縣板橋市文化路一段25號',40,27,'懸浮微粒',0);
addSite(map,7,'新莊',25.034056,121.432583,'台北縣新莊市中正路510號',40,27,'臭氧',0);
addSite(map,8,'菜寮',25.064167,121.480556,'台北縣三重市中正北路135號',40,26,'懸浮微粒',0);
addSite(map,9,'林口',25.078333,121.368611,'台北縣林口鄉民治路25號',40,26,'臭氧',0);
addSite(map,10,'淡水',25.164694,121.449139,'台北縣淡水鎮中正東路42巷6號',40,21,'懸浮微粒',0);
addSite(map,11,'士林',25.105389,121.515139,'台北市北投區文林北路155號',40,37,'懸浮微粒',0);
addSite(map,12,'中山',25.062361,121.526194,'台北市中山區林森北路511號',40,28,'懸浮微粒',0);
addSite(map,13,'萬華',25.030000,121.490556,'台北市萬華區莒光路315號',40,22,'懸浮微粒',0);
addSite(map,14,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號',40,30,'懸浮微粒',0);
addSite(map,15,'松山',25.050833,121.578889,'台北市松山區八德路四段746號',40,23,'懸浮微粒',0);

    } // if
    else {
        alert('您的瀏覽器不支援Google Map');
    } // else
}

function addSite(map, siteCode, siteDesc, lat, lng, address, type) {
//document.getElementById('out').value += "<span class='site'  id='site"+siteCode+"' onclick='GEvent.trigger(arySite["+siteCode+"],\"click\")' onmouseover='GEvent.trigger(arySite["+siteCode+"],\"mouseover\")' onmouseout='GEvent.trigger(arySite["+siteCode+"],\"mouseout\")'>"+siteDesc+"</span>\r\n";    return;

    var icon=new GIcon();
    icon.image="http://klcin.tw/ap/gmap/images/psi1.gif";
    icon.iconSize = new GSize(16,16);
    icon.iconAnchor = new GPoint(8,8);
    icon.infoWindowAnchor = new GPoint(8, 8);

    var mark = new GMarker(
        new GLatLng(lat,lng),
        {icon:icon, title:siteDesc}
        );

    arySite[siteCode] = mark;
    map.addOverlay(mark);
    GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('測站：'+siteDesc+'<br />地址：'+address);});
    GEvent.addListener(mark, "mouseover", function() {
        mark.setImage('http://klcin.tw/ap/gmap/images/psi1r.gif');
        document.getElementById('site'+siteCode).style.background='yellow';
        });
    GEvent.addListener(mark, "mouseout", function() {
        mark.setImage('http://klcin.tw/ap/gmap/images/psi1.gif');
        document.getElementById('site'+siteCode).style.background='white';
        });
}
    //]]>
    </script>
  </head>
  <body onunload="GUnload()">
  <b>04.Marker事件運用</b>
    <div id="map" style="500px; height:500px;float:left;"></div>
    <div id="sitelist" style="float:left;" >
<span class='site' id='site4' onclick='GEvent.trigger(arySite[4],"click")' onmouseover='GEvent.trigger(arySite[4],"mouseover")' onmouseout='GEvent.trigger(arySite[4],"mouseout")'>新店</span>
<span class='site' id='site5' onclick='GEvent.trigger(arySite[5],"click")' onmouseover='GEvent.trigger(arySite[5],"mouseover")' onmouseout='GEvent.trigger(arySite[5],"mouseout")'>土城</span>
<span class='site' id='site6' onclick='GEvent.trigger(arySite[6],"click")' onmouseover='GEvent.trigger(arySite[6],"mouseover")' onmouseout='GEvent.trigger(arySite[6],"mouseout")'>板橋</span>
<span class='site' id='site7' onclick='GEvent.trigger(arySite[7],"click")' onmouseover='GEvent.trigger(arySite[7],"mouseover")' onmouseout='GEvent.trigger(arySite[7],"mouseout")'>新莊</span>
<span class='site' id='site8' onclick='GEvent.trigger(arySite[8],"click")' onmouseover='GEvent.trigger(arySite[8],"mouseover")' onmouseout='GEvent.trigger(arySite[8],"mouseout")'>菜寮</span>
<span class='site' id='site9' onclick='GEvent.trigger(arySite[9],"click")' onmouseover='GEvent.trigger(arySite[9],"mouseover")' onmouseout='GEvent.trigger(arySite[9],"mouseout")'>林口</span>
<span class='site' id='site10' onclick='GEvent.trigger(arySite[10],"click")' onmouseover='GEvent.trigger(arySite[10],"mouseover")' onmouseout='GEvent.trigger(arySite[10],"mouseout")'>淡水</span>
<span class='site' id='site11' onclick='GEvent.trigger(arySite[11],"click")' onmouseover='GEvent.trigger(arySite[11],"mouseover")' onmouseout='GEvent.trigger(arySite[11],"mouseout")'>士林</span>
<span class='site' id='site12' onclick='GEvent.trigger(arySite[12],"click")' onmouseover='GEvent.trigger(arySite[12],"mouseover")' onmouseout='GEvent.trigger(arySite[12],"mouseout")'>中山</span>
<span class='site' id='site13' onclick='GEvent.trigger(arySite[13],"click")' onmouseover='GEvent.trigger(arySite[13],"mouseover")' onmouseout='GEvent.trigger(arySite[13],"mouseout")'>萬華</span>
<span class='site' id='site14' onclick='GEvent.trigger(arySite[14],"click")' onmouseover='GEvent.trigger(arySite[14],"mouseover")' onmouseout='GEvent.trigger(arySite[14],"mouseout")'>古亭</span>
<span class='site' id='site15' onclick='GEvent.trigger(arySite[15],"click")' onmouseover='GEvent.trigger(arySite[15],"mouseover")' onmouseout='GEvent.trigger(arySite[15],"mouseout")'>松山</span>
    </div>
<br clear="all" />
<textarea style="100%;height;100px;display:none;" id="out"></textarea>
<ol>
<li><a href="http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GEvent">GEvent.trigger</a> 從外界觸發gmap內部事件。</li>
<li>滑鼠移至GMarker可使右側對應測站變黃底。</li>
<li>點右側測站可使GMarker顯示資訊視窗。 </li>
</ol>
  </body>
</html>