谷歌地图接口

web相关

2009-04-18 15:58

  1. 使用 script 标签包含地图 API JavaScript。
  2. 创建名为“map_canvas”的 div 元素存放地图。
  3. 编写 JavaScript 函数创建“map”对象。
  4. 将地图中的中心设置为给定的地理点。
  5. 从 body 标签的 onLoad 事件初始化地图对象。
加载 Google 地图 API<script src=http://maps.google.com/maps?file=api&v=2&key=钥匙 type="text/javascript"></script>
地图 DOM 元素<div id="map_canvas" style="width: 500px; height: 300px"></div>GMap2 - 基本对象var map = new GMap2(document.getElementById("map_canvas")); 初始化地图 map.setCenter(new GLatLng(39.917, 116.397), 14); //纬度坐标和缩放级别
加载地图 <body onload="initialize()" onunload="GUnload()"> //将代码放进initialize 经纬度

既然现在已经有地图了，我们还需要一种方式来引用地图的上位置。在 Google 地图 API 中，
GLatLng 对象提供了此类机制。可以构造一个 GLatLng 对象，按照制图学的惯例以（纬度，经度）
的顺序传递参数：


var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)
设置地图属性
G_NORMAL_MAP- 默认视图

var map = new GMap2(document.getElementById("map_canvas"));//创建地图
map.setCenter(new GLatLng(39.917, 116.397), 14); //画图范围 //和尺度
var point = new GLatLng(xxx,yyy); //坐标
map.addOverlay(new GMarker(point)); //增加点
  • G_SATELLITE_MAP - 显示 Google 地球卫星图像
  • G_HYBRID_MAP - 混合显示普通视图和卫星视图
  • G_DEFAULT_MAP_TYPES - 这三个类型的数组，用于迭代处理


  • map.setMapType(G_SATELLITE_MAP);

    • GMap2.disableDragging() 禁用单击地图和将地图拖到新位置的功能。

    添加标记

    信息窗口
    var map = new GMap2(document.getElementById("map_canvas"));//创建地图
    map.setCenter(new GLatLng(39.917, 116.397), 14); //画图范围 //和尺度
    map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world"));
    //在范围内 创建信的提示框

    图标

    标记用自定义的新图标来显示，以替代默认图标。因为地图 API 中单个图标由多个不同的图像组成，所以定义图标非常复杂。一个图标最少必须定义前景图像、类型为 GSize 的尺寸和用于放置图标的图标偏移值。

    最简单的图标是基于 G_DEFAULT_ICON类型。基于此类型创建图标使您可以通过仅修改若干属性即可快速更改默认图标。

    在下面的示例中，我们使用 G_DEFAULT_ICON 类型创建一个图标，然后将其修改为使用其他图像。（使用不同图像时要谨慎，因为它们需要设置为与默认图像相同的正确尺寸才能正常显示。）

    var map = new GMap2(document.getElementById("map_canvas"));map.addControl(new GSmallMapControl());map.setCenter(new GLatLng(39.917, 116.397), 14);// 创建“微型”标记图标var blueIcon = new GIcon(G_DEFAULT_ICON);blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"; // 设置 GMarkerOptions 对象markerOptions = { icon:blueIcon };// 在地图的添加图片标记 var point = new GLatLng(xxx,yyy); map.addOverlay(new GMarker(point, markerOptions));添加控件
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(41.793241,123.415475), 14);
    var mapControl = new GMapTypeControl();//定义控件 map.addControl(mapControl); //增加控件 map.addControl(new GLargeMapControl());//直接增加控件
    map.addControl(控件,位置);方法
    G_ANCHOR_TOP_RIGHT 右上
    G_ANCHOR_TOP_LEFT 左上
    G_ANCHOR_BOTTOM_RIGHT 右下
    G_ANCHOR_BOTTOM_LEFT 左下
    如果不包含此参数，则地图 API 将使用控件指定的默认位置
    在地图上放置可变位置的控件
    <script type="text/javascript"> function initialize() {
        var map = new GMap2(document.getElementById("map_canvas"));//创建地图
        map.setCenter(new GLatLng(41.804606,123.433961), 14); //区域 深度
        var point = new GLatLng(41.804606,123.433961);          //坐标
       map.addOverlay(new GMarker(point));         //增加标点
    map.openInfoWindow(map.getCenter(),document.createTextNode("Hello, world"));
    //增加提示框
       var smallMapControl = new GOverviewMapControl(); //创建控件 下面介绍
       var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
    //取得右上10*10的中心点
       var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
    //取得右下10*10的中心点
       map.addControl(smallMapControl, topRight);//增加控件
           
    GEvent.addListener(map, "dblclick", function() { //绑定双击事件
        map.removeControl(smallMapControl); //移除控件
        map.addControl(new GSmallMapControl(), bottomRight);//增加控件
        });
    } </script>
    GSmallMapControl

    GLargeMapControl

    GSmallZoomControl

    GScaleControl

    GMapTypeControl


    GMenuMapTypeControl
    GHierarchicalMapTypeControl

    GOverviewMapControl


    GOOGLE 地图API 一句话太变态了http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html