Yahoo Maps 範例六 - 地圖上任意的置放五個點

回上頁

別忘了, 你可以利用瀏覽器上的 "檢視" -> "原始檔" (Internet Explorer) 或 "檢視" -> "此頁原始內容" (Firefox), 來觀看程式.

<script type="text/javascript">
var myPoint = new YGeoPoint(25.047795,121.5169);
var map = new YMap(document.getElementById('mapContainer'),YAHOO_MAP_REG,new YSize(600,360));
map.drawZoomAndCenter(myPoint, 8);
map.addZoomLong();

function createYahooMarker(geopoint, num) {
    var myImage = new YImage();
    myImage.src = 'http://us.i1.yimg.com/us.yimg.com/i/us/map/gr/mt_ic_c.gif';
    myImage.size = new YSize(20,20);
    myImage.offsetSmartWindow = new YCoordPoint(0,0);
定義座標點上顯示的圖片 , 定義圖片大小, 和座標點的相對位置.

    var marker = new YMarker(geopoint,myImage);
declare 座標點

    var label = "<img src=http://us.i1.yimg.com/us.yimg.com/i/us/ls/gr/" + num + ".gif>";
    marker.addLabel(label);
定義座標點內顯示的圖片 , , , , 或 . 並送入 marker.addLabel.

    var swtext = "Marker <b> " + num + "</b>";
    YEvent.Capture(marker,EventsList.MouseClick, function() {marker.openSmartWindow(swtext) });
        return marker;
設定座標點的動作. 當滑鼠點選一個座標點 EventsList.MouseClick 時, marker.openSmartWindow 將會顯示 swtext 內的資訊.

}

var bounds = map.getBoundsLatLon();
讀取地圖上的最小經緯度 (bounds.LatMin, bounds.LonMin) 和最大經緯度 (bounds.LatMax, bounds.LonMax).

var height = bounds.LatMax - bounds.LatMin;
獲取地圖的高 bounds.LatMax - bounds.LatMin

var width = bounds.LonMax - bounds.LonMin;
獲取地圖的寬 bounds.LonMax - bounds.LonMin

for (var i = 1; i <= 5; i++) {
    var GeoPoint = new YGeoPoint(bounds.LatMin + height * Math.random(), bounds.LonMin + width * Math.random());
   
隨機在地圖範圍內取一個座標點

    var marker = createYahooMarker(GeoPoint,i);
   
呼叫 Function createYahooMarker, 並送入座標點和 i 的值

    map.addOverlay(marker);
   
在地圖上標上位置

</script>