基于js的google map的开发记录

• 国内的google地图资源接口：ditu.google.cn
• google 的地图是绘制在 canvas 组件中的
• 一般非盈利机构调用google地图的日加载次数在25k以下
• 创建一个简单的google地图的函数：

  var mapOptions = {
  center: new google.maps.LatLng(-34.397, 150.644),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(#canvas对象,mapOptions);
  

• zoom:地图缩放级别，范围 0~21, 依次从大到小
• mapType 分类：
  • ROADMAP，用于显示 Google 地图的默认、普通 2D 图块。
  • SATELLITE，用于显示拍摄的图块。
  • HYBRID，用于同时显示拍摄的图块和重要地图项（道路、城市名）的图块图层。
  • TERRAIN，用于显示自然地形图块，其中包含海拔和水体地图项（山脉、河流等）。

移动设备优化

• 将包含您地图的
  的宽度属性和高度属性都设为 100%。不过请注意，在一些旧版的桌面浏览器上使用这些值无法获得良好的显示效果。
• 您可通过检查 DOM 中的 navigator.userAgent 属性来检测 iPhone 和 Android 设备：

  function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
  
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
  mapdiv.style.width = '100%';
  mapdiv.style.height = '100%';
  } else {
  mapdiv.style.width = '600px';
  mapdiv.style.height = '800px';
  }
  }
  

• Android 和 iOS 设备会应用以下 标记，用于指定地图应以全屏模式显示，且用户不得调整地图的大小。请注意，您需要在网页的 元素中添加此 标记，才能使用 iPhone 的 Safari 浏览器。
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

事件

• 事件类型
  • 用户事件（Google Maps API类型，非传统DOM事件），由 Google Maps 做好了封装工作，屏蔽了各浏览器的兼容问题。事件注册在地图标记Marker对象上。
  • MVC 状态更改通知，事件注册在map对象上，反应Maps API对象中的变化，根据property_changed惯例命名
  • 事件注册方法：google.maps.event.addListener(注册对象，响应类型，回掉处理函数)
  • 使用例子：

  function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(-25.363882, 131.044922),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
        var marker = new google.maps.Marker({
          position: map.getCenter(),
          map: map,
          title: 'Click to zoom'
        });
        google.maps.event.addListener(map, 'center_changed', function() {
          // 3 seconds after the center of the map has changed, pan back to the
          // marker.
          window.setTimeout(function() {
            map.panTo(marker.getPosition());
          }, 3000);
        });
        google.maps.event.addListener(marker, 'click', function() {
          map.setZoom(8);
          map.setCenter(marker.getPosition());
        });
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);