利用 Google API 调用谷歌地图演示1

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_30687587

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量76

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/dwuge/p/5335857.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
  < 
  html  
  xmlns="http://www.w3.org/1999/xhtml"> 
 
  < 
  head 
  > 
 
  < 
  title 
  >演示1</ 
  title 
  > 
 
  < 
  meta  
  name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 
  < 
  style  
  type="text/css"> 
 
  html { height: 100%; } 
 
  body { height: 100%; margin: 0px; padding: 0px; } 
 
  #map_canvas { width:50%; height: 50%; margin: 50px auto; } 
 
  </ 
  style 
  > 
 
  < 
  script  
  type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAAtzdEfkm0e6fFv-EqYY-XJRQdNSJsfUEFgMWL1fb2TrZ8t0A2pRQ10wAqRsmxpdHzRsHswMJAFavZ6g"></ 
  script 
  > 
 
  <!-- sensor 参数表示是否检测用户的地理位置 --> 
 
  < 
  script  
  type="text/javascript"> 
 
  function initialize() 
 
  { 
 
  var latlng = new google.maps.LatLng(22.95, 113.4); /* 广州市番禺区，分别为纬度和经度，常德的经纬度为：29,111.7 */ 
 
  var myOptions = { 
 
  zoom: 12,    /* zoom 的取值范围为：0-19，表示范围最广，19表示范围最小但同时最详细 */ 
 
  center: latlng, 
 
  //disableDefaultUI: true,     /* 是否禁用缩放滚动条和“地图”、“卫星”、“混合”、“地形”，默认为false */ 
 
  mapTypeControl: true,           /* 是否出现“地图”、“卫星”、“混合”、“地形”，默认为true */ 
 
  mapTypeControlOptions: 
 
  { 
 
  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,    /* 以下拉框的形式显示“地图”、“卫星”、“混合”、“地形”，默认值为“google.maps.MapTypeControlStyle.HORIZONTAL_BAR” */ 
 
  position: google.maps.ControlPosition.RIGHT        /* 显示的位置，默认为RIGHT */ 
 
  }, 
 
  navigationControl: true,        /* 是否启用缩放滚动条，默认为true */ 
 
  navigationControlOptions: 
 
  { 
 
  style: google.maps.NavigationControlStyle.SMALL,     /* 已最简单的形式显示缩放滚动条 */ 
 
  position: google.maps.ControlPosition.TOP_LEFT     /* 显示的位置 */ 
 
  }, 
 
  scaleControl: true,          /* 是否等比例缩放 */ 
 
  scaleControlOptions:  
 
  { 
 
  /* position: google.maps.ControlPosition.TOP_LEFT */ 
 
  }, 
 
  mapTypeId: google.maps.MapTypeId.ROADMAP        /* google.maps.MapTypeId.TERRAIN 表示“地形” */ 
 
  /* 
 
  mapTypeControlOptions:  
 
  { 
 
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]  
 
  } 
 
  */ 
 
  }; 
 
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
  }  
 
  </ 
  script 
  > 
 
  </ 
  head 
  > 
 
  < 
  body  
  onload="initialize()"> 
 
  < 
  div  
  id="map_canvas"> 
 
  </ 
  div 
  > 
 
  </ 
  body 
  > 
 
  </ 
  html 
  >