第一步：
去[url]http://www.google.com/apis/maps/signup.html[/url] 申请一个KeyID

第二步：
在HTML的之间加上对MapAPI函数库的引用，

第三步：
在HTML的之间的任意位置加上一个名为map的DIV，

第四步：
在名为map的DIV后面，加上GMap类的实例，

      //创建GMap类的实例
      var map = new GMap(document.getElementById("map"));
      //添加一个控制条
      map.addControl(new GSmallMapControl());
      //设置显示模式为卫星影像
      map.setMapType(G_SATELLITE_TYPE);
      //设置中心点经纬度（上海）和缩放系数，并显示
      map.centerAndZoom(new GPoint(121.4838, 31.2517), 4);


第五步：
随机增加10个标记点，
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
      var point = new GPoint(bounds.minX + width * Math.random(),
               bounds.minY + height * Math.random());
      var marker = createMarker(point, i + 1);
      //添加标记点
      map.addOverlay(marker);
}

第六步：
添加事件响应，
      function createMarker(point, number)
      {
         var marker = new GMarker(point);

         // Show this marker's index in the info window when it is clicked.
         var html = "Marker #" + number + "";
         GEvent.addListener(marker, 'click', function() {
         marker.openInfoWindowHtml(html);});

         return marker;
      }

这里是一个基于GMap2和XML的小例子，数据存在XML文件中，这是最简单的模式，却相当地有用。

实例的网址是：[url]http://sunjian100.googlepages.com/MapTest.html[/url]

另外补充一点，到目前为止，GoogleMap这套平台对于中文字符还不是支持的很好。

下面是脚本方面的例子：

//       var points = [];
      var markers = [];
      var infoWindowHtml = [];
      var sidebarHtml = "";

      var redCircleIcon = new GIcon();
      redCircleIcon.image = "RedCircle7x7.gif";
      redCircleIcon.iconSize = new GSize(7, 7);
      redCircleIcon.iconAnchor = new GPoint(3, 3);
      redCircleIcon.infoWindowAnchor = new GPoint(3, 3);

      function createBridgeMarker(ind, name, latitude, longitude) {
         var marker;
         points[ind] = new GLatLng(latitude, longitude);
         marker = new GMarker(points[ind], redCircleIcon);
         infoWindowHtml[ind] = "" + name + "";
         GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(infoWindowHtml[ind]);
         });
         markers[ind] = marker;
         sidebarHtml += "

";
         return marker;
      }

      function markerSelected(ind) {
         markers[ind].openInfoWindowHtml(infoWindowHtml[ind]);
      }

function onLoad() {
// Creates a map and centers it on the Hot Metal Bridge in Pittsburgh.
if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.addControl(new GScaleControl());
            map.setCenter(new GLatLng(40.6413,-74.1428), 11, G_NORMAL_MAP);

            GDownloadUrl("Bridges.xml", function(data, responseCode) {
               var xml = GXml.parse(data);
               var bridges = xml.documentElement.getElementsByTagName("bridge");
               for (var i = 0; i < bridges.length; i++) {
                  var name = bridges[i].getAttribute("name");
                  var latitude = parseFloat(bridges[i].getAttribute("latitude"));
                  var longitude = parseFloat(bridges[i].getAttribute("longitude"));
                  var marker = createBridgeMarker(i, name, latitude, longitude)
                  map.addOverlay(marker);
               }
               document.getElementById("sidebar").innerHTML = sidebarHtml;
            });
}
}

//]]>

ITPub博客

10分钟学会Google Map API

最新文章