以下為頁面完整程式碼,想請問各位高手們,google map api 的 google.maps.event.addListener 用法！
目的為在新增的marker上,點一下可以秀出infowindow的資訊,每個marker都有特定的infowindow！
我目前的測試只有在<input onclick="showOverlays();" type=button value="Show All Overlays"/>
的Show All Overlays函數裡面的 infowindowArray[1].open(map,markersArray[1]); <--按下按鈕可以順利秀出指定標記的指定資訊！
請問 google.maps.event.addListener 該放在程式中的哪個地方呢,還有裡面的參數該如何設定？例如括號中的markersArray[0]是不是該改成marker？
或當中的函數哪裡需要修改？
另外想請問的是在 initialize() 裡面new 物件（例如Polyline ）和在addPoint()裡面new 有何差別？以及這樣做的目的何在呢？
謝謝！<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var poly;
var markersArray = [];
var infowindow;
var infowindowArray=[];
var marker;
var i=0;
//初始化地圖
function initialize() { //初始化地圖函數
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157); //初始地點
var mapOptions = {
zoom: 12,
center: haightAshbury, //初始地點
mapTypeId: google.maps.MapTypeId.TERRAIN //初始地圖類型
};
map = new google.maps.Map(document.getElementById("map_canvas"), //放到容器中
mapOptions);
//畫線物件的屬性設定
var polyOptions = {
clickable:true, //線條可以被按（滑鼠移過去變成手指）
map:map, //顯示在哪個map實體中 這裡map物件實體名稱也叫map
strokeColor: '#000000', //以下三個是外觀
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions); //實體化畫線物件Polyline（）
//呼叫事件函數event.addListener（事件對象,事件,執行函數）
google.maps.event.addListener(map, 'click', function(event) { //帶入event,為click之後自動產生的參數...
addPoint(event.latLng); }); //...也就是經緯度
/*******************************************************************************************
google.maps.event.addListener(markersArray[0], 'click', function() {
infowindowArray[0].open(map,markersArray[0]);
} );
這段的位置跟裡面的參數未完成 目標：按一下指定標記能出現window
***************************************************/
}
//-----------------------
//-------------
//click事件呼叫的函數
function addPoint(location) { //location = event = event.latLng
var path=poly.getPath(); //紀錄線陣列專用的函數getPath()
path.push(location); //擴充線陣列的函數 push(經緯度)
marker = new google.maps.Marker({ //實體化一個marker
position: location,
title:"座標"+location,
map: map //繪製對象 同線
});
markersArray.push(marker); //將實體化的marker丟進markersArray陣列以控制
infowindow=new google.maps.InfoWindow({content: "第"+markersArray.length+"站點！:i="+i});//content必要屬性 幹
infowindow.open(map,markersArray);
infowindowArray.push(infowindow);
}
//下面沒啥關係
// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (marker) {
for (i in marker) {
marker.setMap(null);
path.setMap(null);
}
}
}
//顯示出 infowindowArray[1].open(map,markersArray[1]);！
// Shows any overlays currently in the array
function showOverlays() {
infowindowArray[1].open(map,markersArray[1]);
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
poly.setMap(null);
}
markersArray.length = 0;
num=0;
}
}
</script>
</head>
<body onload="initialize();">
<div>
<input onclick="clearOverlays();" type=button value="Clear Overlays"/>
<input onclick="showOverlays();" type=button value="Show All Overlays"/>
<input onclick="deleteOverlays();" type=button value="Delete Overlays"/>
</div>
<div id="map_canvas" style="width:600px; height:500px"></div>
</body>
</html> | 
發表於 2010-10-27 02:06
| 
發表於 2010-10-27 08:03
|