GoogleMap : [Google Map]GMark事件运用(GEvent)
2010-03-05 08:59
246 查看
代码
<!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="width: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="width: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>
<!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="width: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="width: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>
相关文章推荐
- 程 序制作步骤,三级联动,委托事件和Repeater灵活运用以及JS知识补充
- Unity中消息事件的封装与运用
- 运用onmousewheel事件 写的幻灯片demo
- 8、面向对象以及winform的简单运用(事件与winform入门)
- 运用xlib进行事件响应(X11 API)的小例子
- C#事件与代理的简单运用
- 运用客观模型思考c#中的事件
- JQuery mouse事件运用方法
- 一只自动化测试小白的学习记录——Python+Selenium+Sublime 运用API、元素定位、元素操作方法、鼠标键盘事件实现入门Web自动化测试
- 4000 reactjs 中运用swiper 插件时 点击事件失效问题
- 委托事件的实际运用
- 关于gevent的协程间通信及队列和事件event用法 推荐
- google map事件监听
- 委托和事件的运用
- 游戏开发中,回调机制和事件机制的灵活运用
- android广播事件处理broadcast receive -闹钟实例(运用alarmmanager)
- 运用xlib进行事件响应(X11 API)的小例子
- 捕鱼达人(炮筒跟着鼠标旋转,委托事件的运用)
- sql事件监视器运用案例
- google map 事件类型