论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2008-07-23 12:50 |只看该作者 |倒序浏览

看简单的例子是开始学习API的最有效的方法，这个网页在层上居中显示了一个300x300的地图:

<!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>
<title>Google Maps JavaScript API Example - simple</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>
  </head>
  <body>
<div id="map" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
   var map = new GMap(document.getElementById("map"));
   map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
}

//]]>
</script>
  </body>

</html>

你可以点这儿预览这个例子的效果，不过在你上传到自己的网站上运行之前，你必须把其中的"&key="之后的授权码换成自己在Maps API key申请的授权码，否则看不到效果.本网站使用的范例中的授权码只能在Step1.cn域名上使用。

你可以看到，Google Maps使用了一个JavaScript文件(http://maps.google.com/maps?file=api&v=1) 这个文件包含了你在自己的网页上显示Google地图的所有的函数和类. 想要在自己的网页上使用Google Maps API，你必须在网页上通过script标签连接一个包含你申请的授权码的URL:

<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>

Google Maps API提供的最重要的类是GMap,它代表页面上的地图对象，你可以根据需要在页面上使用多个GMap的实例每个地图被包含在一个HTML的容器(container)里面，比如DIV标签.

下面会讲到如何给地图实例添加和操作标注.

浏览器兼容性
Google Maps并不是对每一个浏览器都兼容的， Google Maps 现在兼容Firefox/Mozilla, IE 5.5+, Safari 1.2+和Opera，不支持IE 5.0.因为每个不兼容的浏览器的动作又是不同的，所以Maps API提供了一个全局的方法(GBrowserIsCompatible())来检查浏览器兼容性，但是并不自动检查. 引入的脚本http://maps.google.com/maps?file=api&v=1可以在几乎所有的浏览器中被正常解析，所以你可以放心的在检查浏览器兼容性之前引入该脚本.

在本文的所有例子之中，除了上面的一篇之外，其他的既没有用GBrowserIsCompatible()检查浏览器兼容性，也没有给出任何错误信息正式使用的程序上应该有更加友好的处理方法，这里为了让这些例子更加易懂，而忽略了浏览器检查.

XHTML和VML
建议你在需要使用地图的网页上使用标准的兼容性好的XHTML,当页面顶端存在DOCTYPE标签时，浏览器会使用"标准兼容模式"来处理页面，这将使页面能更好的跨越浏览器执行.

同样，如果你需要在地图上包含折线，你需要为IE浏览器在页面上引入VML命名空间这样，你的文档开头就应该是这样的：

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
<style type="text/css">
v\:* {
   behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg" type="text/javascript"></script>
  </head>

关于VML，你可以在Microsoft's VML workshop查找更多信息.

API更新
引入的JavaScript文件URLhttp://maps.google.com/maps?file=api&v=1指向到 API 的"版本1"，如果API出现了重要的升级，会增加这个版本号并且在Google Code和Maps API讨论组上面发布公告.

Google会同时运行新版和旧版一个月左右，随后旧版就会被关闭.

地图工作小组会在修复BUG或改善性能之后随时更新API，这些更新仅仅是为了改善性能和修复错误，不过在这个工程之中也可能发生影响API连接的情况如果这样的事情发生，你可以到Maps API discussion group报告你遇到的情况

地理、行程和其他
Google Maps API现在并不包含地理和行程服务,可在网上有许多关于free geocoders的相关内容.

应用范例

一个简单例子
创建一个在所在层中居中的地图

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

查看范例(simple.html)

地图的移动和变换
recenterOrPanToLatLng 方法进行一个地图变换，目标点经/纬在当前视口之中时执行一个连续的动作，否则，执行不连续的变换动作

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
window.setTimeout(function() {
  map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));
}, 2000);

查看范例(animate.html)

在地图上添加控件
addControl方法可以在地图上添加控件，并且集成了GSmallMapControl(用来缩放和移动图片)和GMapTypeControl(用来在地图和卫星图模式间切换)两个控件.

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

查看范例(controls.html)

事件监视
GEvent.addListener用来注册事件监视器，在这个例子中，在用户移动或拖拽地图后，输出地图中心点的经/纬.

var map = new GMap(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
  var center = map.getCenterLatLng();
  var latLngStr = '(' + center.y + ', ' + center.x + ')';
  document.getElementById("message").innerHTML = latLngStr;
});
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

查看范例(event.html)

显示信息浮窗
这个范例显示一个指向地图中心点的"Hello world"信息浮窗，这里信息浮窗显示在指向点的上面，而实际上，信息窗能在地图的任何地方显示.

var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
map.openInfoWindow(map.getCenterLatLng(),
               document.createTextNode("Hello world"));

查看范例(infowindow.html)

地图标注
本范例通过创建10个随机的标注和折线来说明地图标注的用法.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Add 10 random markers in the map viewport using the default icon
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 = new GMarker(point);
  map.addOverlay(marker);
}

// Add a polyline with 4 random points. Sort the points by longitude so that
// the line does not intersect itself.
var points = [];
for (var i = 0; i < 5; i++) {
  points.push(new GPoint(bounds.minX + width * Math.random(),
                     bounds.minY + height * Math.random()));
}
points.sort(function(p1, p2) { return p1.x - p2.x; });
map.addOverlay(new GPolyline(points));

查看范例(overlay.html)

响应用户点击
本范例在用户点击地图时，在相应的点创建一个标记，用户点击标记时，移除这个标记.

var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

GEvent.addListener(map, 'click', function(overlay, point) {
  if (overlay) {
map.removeOverlay(overlay);
  } else if (point) {
map.addOverlay(new GMarker(point));
  }
});

查看范例(click.html)

在标记上显示信息浮窗
在这个例子中，点击每一个标记，就会在标记上面显示一个自定义的信息浮窗.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates a marker whose info window displays the given number
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 #<b>" + number + "</b>";
  GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
  });

  return marker;
}

// Add 10 random markers in the map viewport
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);
}

查看范例(markerinfowindow.html)

创建图标
创建一种新图标,就像在Google Ride Finder上面使用的迷你标记一样.必须给图标指定前景图片、阴影图片、图标在地图上的点和信息浮窗在图标上的点.

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates one of our tiny markers at the given point
function createMarker(point) {
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);
  GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("You clicked me!");
  });
}

// Place the icons randomly in the map viewport
var bounds = map.getBoundsLatLng();
var width = bounds.maxX - bounds.minX;
var height = bounds.maxY - bounds.minY;
for (var i = 0; i < 10; i++) {
  createMarker(new GPoint(bounds.minX + width * Math.random(),
                        bounds.minY + height * Math.random()));
}

查看范例(icon.html)

使用图标类
多数情况下，使用的图标可能前景图片不同，可是形状和阴影是一样的，达到这种效果最简单的方法是使用GIcon类的copy方法来构造.这样可以将一个Icon对象的所有属性复制到一个新的Icon对象中.

// Create a base icon for all of our markers that specifies the shadow, icon
// dimensions, etc.
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Creates a marker whose info window displays the letter corresponding to
// the given index
function createMarker(point, index) {
  // Create a lettered icon for this point using our icon class from above
  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var icon = new GIcon(baseIcon);
  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
  var marker = new GMarker(point, icon);

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

  return marker;
}

// Add 10 random markers in the map viewport
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);
  map.addOverlay(marker);
}

查看范例(iconclass.html)

在地图上使用XML和异步RPC ("AJAX")
在这个范例中，我们下载一个静态文件("data.xml")，这个XML文件中包含一系列经/纬坐标，当下载完成后，读取这个XML文件并为每一个坐标在地图上创建一个标记.

// Center the map on Palo Alto
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);

// Download the data in data.xml and load it on the map. The format we
// expect is:
// <markers>
// <marker lat="37.441" lng="-122.141"/>
// <marker lat="37.322" lng="-121.213"/>
// </markers>
var request = GXmlHttp.create();
request.open("GET", "data.xml", true);
request.onreadystatechange = function() {
  if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
   var point = new GPoint(parseFloat(markers.getAttribute("lng")),
                           parseFloat(markers.getAttribute("lat")));
   var marker = new GMarker(point);
   map.addOverlay(marker);
}
  }
}
request.send(null);

文库|博客

返回列表

Chinaunix › 论坛 › 程序设计 › OpenAPI › Google Maps的"Hello World"

Google Maps的"Hello World" [复制链接]