• 免费Google地图API使用说明(转)

    转自：http://www.cnblogs.com/mypig/articles/1936154.html
    01 事件监视
    02   
    03 GEvent.addListener用来注册事件监视器，在这个例子中，在用户移动或拖拽地图后，输出地图中心点的经/纬.
    04   
    05   
    06 var map = new GMap(document.getElementById("map"));
    07 GEvent.addListener(map, "moveend", function() {
    08 var center = map.getCenterLatLng();
    09 var latLngStr = '(' + center.y + ', ' + center.x + ')';
    10 document.getElementById("message").innerHTML = latLngStr;
    11 });
    12 map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    view sourceprint?
    1 显示信息浮窗
    2   
    3 这个范例显示一个指向地图中心点的"Hello world"信息浮窗，这里信息浮窗显示在指向点的上面，而实际上，信息窗能在地图的任何地方显示.
    4   
    5   
    6 var map = new GMap(document.getElementById("map"));
    7 map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    8 map.openInfoWindow(map.getCenterLatLng(),
    9 document.createTextNode("Hello world"));
    view sourceprint?
    01 地图标注
    02   
    03 本范例通过创建10个随机的标注和折线来说明地图标注的用法.
    04   
    05   
    06 // Center the map on Palo Alto
    07 var map = new GMap(document.getElementById("map"));
    08 map.addControl(new GSmallMapControl());
    09 map.addControl(new GMapTypeControl());
    10 map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    11   
    12 // Add 10 random markers in the map viewport using the default icon
    13 var bounds = map.getBoundsLatLng();
    14 var width = bounds.maxX - bounds.minX;
    15 var height = bounds.maxY - bounds.minY;
    16 for (var i = 0; i < 10; i++) {
    17 var point = new GPoint(bounds.minX + width * Math.random(),
    18 bounds.minY + height * Math.random());
    19 var marker = new GMarker(point);
    20 map.addOverlay(marker);
    21 }
    22   
    23 // Add a polyline with 4 random points. Sort the points by longitude so that
    24 // the line does not intersect itself.
    25 var points = [];
    26 for (var i = 0; i < 5; i++) {
    27 points.push(new GPoint(bounds.minX + width * Math.random(),
    28 bounds.minY + height * Math.random()));
    29 }
    30 points.sort(function(p1, p2) { return p1.x - p2.x; });
    31 map.addOverlay(new GPolyline(points));
    view sourceprint?
    01 响应用户点击
    02   
    03 本范例在用户点击地图时，在相应的点创建一个标记，用户点击标记时，移除这个标记.
    04   
    05   
    06 var map = new GMap(document.getElementById("map"));
    07 map.addControl(new GSmallMapControl());
    08 map.addControl(new GMapTypeControl());
    09 map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    10   
    11 GEvent.addListener(map, 'click', function(overlay, point) {
    12 if (overlay) {
    13 map.removeOverlay(overlay);
    14 } else if (point) {
    15 map.addOverlay(new GMarker(point));
    16 }
    17 });
    view sourceprint?
    01 在标记上显示信息浮窗
    02   
    03 在这个例子中，点击每一个标记，就会在标记上面显示一个自定义的信息浮窗.
    04   
    05   
    06 // Center the map on Palo Alto
    07 var map = new GMap(document.getElementById("map"));
    08 map.addControl(new GSmallMapControl());
    09 map.addControl(new GMapTypeControl());
    10 map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    11   
    12 // Creates a marker whose info window displays the given number
    13 function createMarker(point, number) {
    14 var marker = new GMarker(point);
    15   
    16 // Show this marker's index in the info window when it is clicked
    17 var html = "Marker #<b>" + number + "</b>";
    18 GEvent.addListener(marker, "click", function() {
    19 marker.openInfoWindowHtml(html);
    20 });
    21   
    22 return marker;
    23 }
    24   
    25 // Add 10 random markers in the map viewport
    26 var bounds = map.getBoundsLatLng();
    27 var width = bounds.maxX - bounds.minX;
    28 var height = bounds.maxY - bounds.minY;
    29 for (var i = 0; i < 10; i++) {
    30 var point = new GPoint(bounds.minX + width * Math.random(),
    31 bounds.minY + height * Math.random());
    32 var marker = createMarker(point, i + 1);
    33 map.addOverlay(marker);
    34 }
    view sourceprint?
    01 创建图标
    02   
    03 创建一种新图标,就像在Google Ride Finder上面使用的迷你标记一样.必须给图标指定前景图片、阴影图片、图标在地图上的点和信息浮窗在图标上的点.
    04   
    05   
    06 // Create our "tiny" marker icon
    07 var icon = new GIcon();
    08 icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    09 icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    10 icon.iconSize = new GSize(12, 20);
    11 icon.shadowSize = new GSize(22, 20);
    12 icon.iconAnchor = new GPoint(6, 20);
    13 icon.infoWindowAnchor = new GPoint(5, 1);
    14   
    15 // Center the map on Palo Alto
    16 var map = new GMap(document.getElementById("map"));
    17 map.addControl(new GSmallMapControl());
    18 map.addControl(new GMapTypeControl());
    19 map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    20   
    21 // Creates one of our tiny markers at the given point
    22 function createMarker(point) {
    23 var marker = new GMarker(point, icon);
    24 map.addOverlay(marker);
    25 GEvent.addListener(marker, "click", function() {
    26 marker.openInfoWindowHtml("You clicked me!");
    27 });
    28 }
    29   
    30 // Place the icons randomly in the map viewport
    31 var bounds = map.getBoundsLatLng();
    32 var width = bounds.maxX - bounds.minX;
    33 var height = bounds.maxY - bounds.minY;
    34 for (var i = 0; i < 10; i++) {
    35 createMarker(new GPoint(bounds.minX + width * Math.random(),
    36 bounds.minY + height * Math.random()));
    37 }
    view sourceprint?
    01 使用图标类
    02   
    03 多数情况下，使用的图标可能前景图片不同，可是形状和阴影是一样的，达到这种效果最简单的方法是使用GIcon类的copy方法来构造.这样可以将一个Icon对象的所有属性复制到一个新的Icon对象中.
    04   
    05   
    06 // Create a base icon for all of our markers that specifies the shadow, icon
    07 // dimensions, etc.
    08 var baseIcon = new GIcon();
    09 baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    10 baseIcon.iconSize = new GSize(20, 34);
    11 baseIcon.shadowSize = new GSize(37, 34);
    12 baseIcon.iconAnchor = new GPoint(9, 34);
    13 baseIcon.infoWindowAnchor = new GPoint(9, 2);
    14 baseIcon.infoShadowAnchor = new GPoint(18, 25);
    15   
    16 // Center the map on Palo Alto
    17 var map = new GMap(document.getElementById("map"));
    18 map.addControl(new GSmallMapControl());
    19 map.addControl(new GMapTypeControl());
    20 map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    21   
    22 // Creates a marker whose info window displays the letter corresponding to
    23 // the given index
    24 function createMarker(point, index) {
    25 // Create a lettered icon for this point using our icon class from above
    26 var letter = String.fromCharCode("A".charCodeAt(0) + index);
    27 var icon = new GIcon(baseIcon);
    28 icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
    29 var marker = new GMarker(point, icon);
    30   
    31 // Show this marker's index in the info window when it is clicked
    32 var html = "Marker <b>" + letter + "</b>";
    33 GEvent.addListener(marker, "click", function() {
    34 marker.openInfoWindowHtml(html);
    35 });
    36   
    37 return marker;
    38 }
    39   
    40 // Add 10 random markers in the map viewport
    41 var bounds = map.getBoundsLatLng();
    42 var width = bounds.maxX - bounds.minX;
    43 var height = bounds.maxY - bounds.minY;
    44 for (var i = 0; i < 10; i++) {
    45 var point = new GPoint(bounds.minX + width * Math.random(),
    46 bounds.minY + height * Math.random());
    47 var marker = createMarker(point, i);
    48 map.addOverlay(marker);
    49 }
    view sourceprint?
    01 在地图上使用XML和异步RPC ("AJAX")
    02   
    03 在这个范例中，我们下载一个静态文件("data.xml")，这个XML文件中包含一系列经/纬坐标，当下载完成后，读取这个XML文件并为每一个坐标在地图上创建一个标记.
    04   
    05   
    06 // Center the map on Palo Alto
    07 var map = new GMap(document.getElementById("map"));
    08 map.addControl(new GSmallMapControl());
    09 map.addControl(new GMapTypeControl());
    10 map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
    11   
    12 // Download the data in data.xml and load it on the map. The format we
    13 // expect is:
    14 // <markers>
    15 //   <marker lat="37.441" lng="-122.141"/>
    16 //   <marker lat="37.322" lng="-121.213"/>
    17 // </markers>
    18 var request = GXmlHttp.create();
    19 request.open("GET", "data.xml", true);
    20 request.onreadystatechange = function() {
    21 if (request.readyState == 4) {
    22 var xmlDoc = request.responseXML;
    23 var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    24 for (var i = 0; i < markers.length; i++) {
    25 var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
    26 parseFloat(markers[i].getAttribute("lat")));
    27 var marker = new GMarker(point);
    28 map.addOverlay(marker);
    29 }
    30 }
    31 }
    32 request.send(null);
    view sourceprint?
    001 API 概要
    002   
    003   
    004 GMap类
    005   
    006 GMap的每一个实例表现为页面上的一个地图，可以创建这个类的多个实例 每个地图被包含在一个container之中，比如一个DIV标签，除非明确指定，地图将使用相应container的大小.
    007   
    008 GMap类提供了操作地图点(中心和缩放度)和添加删除标记(比如GMarker和GPolyline实例)和方法. 同时也提供了一个打开"信息浮窗"的方法，地图上同时只能有一个信息浮窗.
    009   
    010 更多信息请参看GMap类参考
    011   
    012   
    013   
    014 事件
    015   
    016 利用事件监视器，你可以在程序中加入动态的内容，每个实例提供一些指定的事件，你的程序可以利用静态方法GEvent.addListener或GEvent.bind监视这些事件. 例如，以下代码片断在每次用户点击地图的时候显示一个警告:
    017   
    018   
    019 var map = new GMap(document.getElementById("map"));
    020 GEvent.addListener(map, "click", function() {
    021 alert("You clicked the map");
    022 });
    023 GEvent.addListener使用一个函数作为第三个参数，这个函数作为事件处理器，在事件被触发时运行. 如果想绑定一个对象的方法到事件，可以使用GEvent.bind.例如：
    024   
    025   
    026 function MyApplication() {
    027 this.counter = 0;
    028 this.map = new GMap(document.getElementById("map"));
    029 GEvent.bind(this.map, "click", this, this.onMapClick);
    030 }
    031   
    032 MyApplication.prototype.onMapClick() {
    033 this.counter++;
    034 alert("You have clicked the map " + this.counter +
    035 this.counter == 1 ?" time.":" times.");
    036 }
    037   
    038 var application = new MyApplication();
    039   
    040   
    041 信息浮窗
    042   
    043 Map类有一个信息浮窗，可以在地图上以浮动窗口模式在地图上显示HTML内容.
    044   
    045 基本的浮动窗口方法是openInfoWindow，这个方法以一个点和一个HTML节点作为参数，这个HTML节点被添加到信息浮窗容器里面，并显示在相应点处.
    046   
    047 openInfoWindowHtml差不多，但是它使用HTML字符串作为参数.openInfoWindowXslt则利用XML节点和XSLT文档的URL地址来生成信息浮窗内容，如果该XSLT文档还没有被下载，则会自动异步下载此文件.
    048   
    049 如果需要在标记上显示信息浮窗，你可以传递第三个参数(可选)给出窗口顶端和给定点位置的像素差. 比如你的标记高度是10px,你可以使用GSize(0,-10)作第三个参数.
    050   
    051 GMarker类还提供了openInfoWindow方法用来处理像素值内容，所以不用担心在程序中计算像素的问题.
    052   
    053   
    054   
    055 标注
    056   
    057 标注是一些绑定到地理坐标的对象，当移动、缩放地图或切换模式(比如从地图到卫星图)时，标注也会跟着变化.
    058   
    059 Maps API提供两种标注:标记(地图上的图标)和折线(根据地理位置绘制的折线)
    060   
    061   
    062 图标和标记
    063   
    064 TheGMarker构造函数使用一个图标和一个点作为参数，并提供一些类似"点击"的事件，看这个创建标记的例子
    065   
    066 创建标记最困难的地方是指定图标，复杂在于一个图标需要几个不同的图片构成.
    067   
    068 每一个图标至少都有一个前景图片和一个阴影图片，阴影必须是前景图的45度视角的形状，并且左下角和前景图的左下角重叠，还必须是24-bit PNG灰度图片，才能刚好使图标看起来像站在地图上一样.
    069   
    070   
    071 TheGIcon需要指定图标使用的图片文件的大小以便以合适的大小显示这些图片，一下是指定一个图标的最基本的代码：
    072   
    073   
    074 var icon = new GIcon();
    075 icon.image = "http://www.google.com/mapfiles/marker.png";
    076 icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    077 icon.iconSize = new GSize(20, 34);
    078 icon.shadowSize = new GSize(37, 34);
    079 TheGIcon类提供有超过7个的属性必须设置以保证图标在浏览器上的兼容性和功能. 比如imageMap属性指定图标不透明部分的形状，如果你没有设置这个属性，在Firefox/Mozilla浏览器上，整个图标(包括透明部分)都能被点击. 看这个GIcon类参考了解更多信息
    080   
    081   
    082   
    083 折线
    084   
    085 GPolyline构造函数使用一组地理点最为参数，你也能指定颜色、线宽和透明度 颜色采用老的HTML样式，比如"#ff0000".GPolyline不支持直接使用颜色名字. 例如以下代码会创建一个10像素宽的红色线段：
    086   
    087   
    088 var polyline = new GPolyline([new GPoint(-122.1419, 37.4419),
    089 new GPoint(-122.1519, 37.4519)],
    090 "#ff0000", 10);
    091 map.addOverlay(polyline);
    092   
    093 在IE浏览器中，我们用VML来绘制折线，而在其他的浏览器之中，我们使用Google服务器上的图片，并在地图变化时重新刷新图片.
    094   
    095   
    096   
    097 控件
    098   
    099 addControl用来添加控件，Maps API可以让你在地图上使用如下控件：
    100   
    101   
    102 GLargeMapControl在Google Map中使用的大缩放/定位控件
    103 GSmallMapControl在Google Map中使用的小缩放/定位控件
    104 GSmallZoomControl一个小的缩放控件(不能定位)，用在小窗口中显示驾驶方向
    105 GMapTypeControl地图类型切换控件(如：地图和卫星图)
    106 例如，要在地图上添加一个缩放/定位控件，你可以在地图初始化时使用如下代码：
    107   
    108   
    109 map.addControl(new GLargeMapControl());
    110 这样，控件就会被添加到地图的左上角
    111   
    112   
    113   
    114 XML和RPC
    115   
    116 Google Maps API提供了一个创建XmlHttpRequest对象的方法，当前可以在IE, Firefox, and Safari上运行正常，如下：
    117   
    118   
    119 var request = GXmlHttp.create();
    120 request.open('GET', "myfile.txt", true);
    121 request.onreadystatechange = function() {
    122 if (request.readyState == 4) {
    123 alert(request.responseText);
    124 }
    125 }
    126 request.send(null);
    127 你还可以使用静态方法GXml.parse来解析一个XML文档，使用XML字符串作为参数，这个方法对所有的浏览器兼容. 如果本地浏览器不支持XML解析，则会采用一个基于JavaScript的解析器，可是不能保证这个解析器一定能正常的解析.
    128   
    129 注意Google Maps API不需要使用XML或XmlHttpRequest因为这是一个纯JavaScript/DHTML的API.

    google: api

    http://code.google.com/intl/zh-CN/apis/maps/index.html 

    Google:demo

    http://www.google.com/apis/maps/demo/

    地理学习小游戏

    五岳名山您一定听说过，但您还记得它们分别在哪里吗？ 在这个小游戏中，您可以根据给出地理名词，将对应的标注拖拽到地图中恰当的位置上。当您完成后， 请点击“评判”，程序将自动判断您的回答是否正确，并给出成绩。同时，在查看答案的模式下， 点击标注还将弹出该景点的介绍。多练习几次，Google 地图 API 定能让您对它们的位置了如指掌！

    多点测距尺

    想知道地球上任意两个地点距离多远？想知道您上班走了多远的路？有了Google 地图 API，您可以 轻而易举地给地图添加标注和路径，并实现自己的“测距尺”。在这个例子中，您还可以随意地修改现有路径， 甚至将“测距尺”包装成自定义的 Google 地图 API控件，和别人分享。

    神奇的放大镜

    这个放大镜可不是简单地将地图的局部放大：透过它，您能够看到地图上更多的细节。事实上，这是通过 两个独立的、显示不同缩放级别的地图控件实现的。只有想不到，没有做不到。如果您熟悉 javascript， Google 地图 API 还有很多新奇的功能等待您的发现！

    开发人员指南：

    查看示例

    http://code.google.com/intl/zh-CN/apis/maps/documentation/premier/guide.html#MapsJS

    开始编写 hello world：

    http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/tutorial.html

    查看示例

    查看示例

    Google Maps JavaScript API V3 演示库

    http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/demogallery.html

    地图叠加层

    http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/overlays.html
  • 相关阅读:
    linux基础-第十八单元_nginx部署
    centos7 启动docker失败--selinux-enabled=false
    crontab 写入文件目录
    kvm : Permission denied
    使用spice连接kvm guest主机
    python中bottle模块的使用
    如何监控开源 Apache Kafka？
    Spring Quartz
    【问题排查】kafka0.10.x过期数据不会自动删除问题
    Apache Kafka监控之Kafka Web Console
  • 原文地址：https://www.cnblogs.com/millen/p/2020500.html
Copyright © 2020-2023  润新知