oid/WorkLog/GoogleMPL – Grid Architecture

Context Navigation

google map 可參考的相關技術

範例一、赤壁地圖

透過Google API可以自行定義客製化地圖資料，為了實現海洋資料庫，可以參考做的不錯的赤壁地圖：

http://maps.google.com.tw/maps/mpl?moduleurl=http://redcliff.googlecode.com/svn/trunk/mapplet/redcliff_tc.xml&t=p&utm_campaign=zh_TW&utm_medium=mapshpp&utm_source=zh_TW-mapshpp-apac-tw-gns-mp&utm_term=redc

屏除美工部份，技術部份除了用到jquery, json, javascript 等，在google map裡有個mpl的module url轉址功能，可以直接讓你要的程式掛在預設的google map中， mpl?moduleurl=網址 網址的部份可以轉到我們的網站，就可以直接套用了

還有些utm_campaign、utm_source...的參數，他的作用是用google analytics的link tag來分析瀏覽者的流量來源，有個不錯的教學

原始碼下載:

svn checkout http://redcliff.googlecode.com/svn/trunk/ redcliff-read-only

範例二、地震中心資料

除了參考赤壁地圖，還有個比較簡單的範例就是國外的地震中心google maps

這個網站被引導到的earthquakes.xml程式碼不太複雜，用java scripts寫在xml裡，程式當中還會去導入一個rss feed，這個rss每週更新，好讓這個google map可以呈現最近一週、一個月、等的地震資訊。

內容如下：

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Real-time Earthquakes" 
                description="USGS Earthquakes for the past 7 days"
                author="Scott Haefner"
                author_email="shaefner@usgs.gov"
                author_affiliation="U.S. Geological Survey"
                screenshot="http://earthquake.usgs.gov/eqcenter/mapplets/ss-earthquakes.png"
                thumbnail="http://earthquake.usgs.gov/eqcenter/mapplets/tn-earthquakes.png"
                height="300">
  <Require feature="sharedmap"/>
  <Require feature="analytics"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<style type="text/css">
h1 {
  font-size: 18px;
  color: #333;
  padding: 0;
  margin: 0 5px;
}
h2 {
  font-size: 14px;
  color: #633;
  padding: 0;
  margin: 1em 5px;
}
p {
  font-family: Georgia, serif;
  font-size: 12px;
  line-height: 18px;
  color: #666;
  padding: 0;
  margin: 2px 0 6px 8px;
}
ol {
  font-size: 12px;
  margin: 1em 1em 1em 2.5em;
  padding: 0;
}
li {
  margin: .4em 0;
  padding: 0;
}
img {
  padding-left: 10px;
}
</style>
<h1>M 4+ Earthquakes, past 7 days</h1>
<div id="content">
</div>

<script type="text/javascript">

// Global variables
var map = null;
var eqs = [];
var icons = [];
var markers = [];

var points = {
  color: { // Marker: icon color
    'pasthour': 'red',
    'pastday': 'orange',
    'pastweek': 'yellow'
  },
  size: { // Marker: icon size in pixels
    'M1': 11,
    'M2': 15,
    'M3': 17,
    'M4': 21,
    'M5': 25,
    'M6': 31,
    'M7': 37,
    'M8': 45,
    'M9': 55
  }
};


function initMap() {
  createMap();
  readMarkers();
}


function createMap() {
  var map_center = new GLatLng(20, 170);
  var map_zoom = 2;
  var map_type = G_SATELLITE_MAP; //G_NORMAL_MAP
  map = new GMap2({ logoPassive:true });
  map.setCenter(map_center, map_zoom, map_type);
}


function readMarkers() {

  // Fetch RSS feed
  var feed = "http://earthquake.usgs.gov/eqcenter/catalogs/eqs7day-M4.xml";
  _IG_FetchXmlContent(feed, function(response) {  
    if (response == null || typeof(response) != "object" || response.firstChild == null) {
      _gel("content").innerHTML = "<i>Invalid data.</i>";
      return;
    }

    var pubDate = response.getElementsByTagName("pubDate");
    var feed_pubDate = pubDate.item(0).firstChild.nodeValue;

    eqs = response.getElementsByTagName("item");
    
    var html = "<p>" + eqs.length + " earthquakes on this map<br />Updated " + feed_pubDate + "</p>";
    html += '<img src="http://earthquake.usgs.gov/eqcenter/mapplets/legend.png" alt="legend" />';
    html += "<h2>10 Most Recent Earthquakes</h2>";
    html += "<ol>";
    
    // Loop through eq list (<item> nodes)
    for (var i = 0; i < eqs.length; i++) {
  
      // For each eq, get child nodes
      var item_nodes = eqs.item(i).childNodes;
      
      dcsubject_count = 1;
      
      // Loop through child nodes
      for (var j = 0; j < item_nodes.length; j++) {
        
        node = item_nodes.item(j);
        
        switch (node.nodeName) {
          case 'title':
            title = node.firstChild.nodeValue;
            break;
          case 'description':
            description = node.firstChild.nodeValue;
            break;
          case 'link':
            link = node.firstChild.nodeValue;
            break;
          case 'geo:lat':
            lat = parseFloat(node.firstChild.nodeValue);
            break;
          case 'geo:long':
            long = parseFloat(node.firstChild.nodeValue);
            break;
          case 'dc:subject':
            switch (dcsubject_count) {
              case 3: //third dc:subject tag
                var depth = node.firstChild.nodeValue;
                break;
              case 2: //second dc:subject tag
                var age = node.firstChild.nodeValue;
                dcsubject_count ++;
                break;
              case 1: //first dc:subject tag
                var mag = node.firstChild.nodeValue;
                dcsubject_count ++;
                break;
            }
            break;
        }
      }
        
      if (i < 10) { // Show first 10 earthquakes in sidebar
        html += '<li><a href="javascript:showBubble(' + i + ')" title="View earthquake on map">' + title + "</a></li>";
      }
      
      var bubble = '<div style=\"width:250px;\"><p><strong>' + title + '</strong><br />' + description + '</p><p><a href="' + link + '" target="_new">Earthquake Details</a> &raquo;</p></div>';
      var titletip = title;
      var icon = getIcon(age, parseInt(mag));

      createMarker(lat, long, icon, titletip, bubble, i);

    }

    html += "</ol>";

    // Display HTML string in <div>
    _gel('content').innerHTML = html;
    
  }, { refreshInterval: (60 * 5) }); // Allow Google to cache feed for only 5-minutes
}


// Create marker object for earthquake overlay

function createMarker(lat, long, icon, titletip, bubble, count) {
  var marker = new GMarker(new GLatLng(lat, long), {icon:icon, title:titletip});
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(bubble, {disableGoogleLinks:true});
  });
  map.addOverlay(marker);
  markers[count] = marker; // Save for use in sidebar link
}


// Set icon properties based on age, magnitude

function getIcon(age, mag) {
  var ref = 'M' + mag + '-' + points.color[age];
  if (!icons[ref]) {
    var center_pt = parseInt(points.size['M'+mag]/2);
    var icon = new GIcon();
    icon.image = 'http://earthquake.usgs.gov/eqcenter/maps/images/' + ref + '.png';
    icon.iconSize = new GSize(points.size['M'+mag], points.size['M'+mag]);
    icon.iconAnchor = new GPoint(center_pt, center_pt);
    icon.infoWindowAnchor = new GPoint(center_pt, center_pt);
    icons[ref] = icon;
  }
  return icons[ref];
}


// Show bubble window when eq clicked from sidebar

function showBubble(i) {
  GEvent.trigger(markers[i], "click");
}

_IG_RegisterOnloadHandler(initMap);
_IG_Analytics("UA-2265247-1", "/eqcenter/mapplets/earthquakes.xml");

</script>

]]></Content>
</Module>

Last modified 16 years ago Last modified on Feb 4, 2009, 12:31:20 PM

Download in other formats:

Plain Text