HTML5+google map自我瞎学习

来源：互联网发布：大数据人才评价体系编辑：程序博客网时间：2024/05/29 03:40
感想W3C中国
<!DOCTYPE html><html><body><p id="demo">点击这个按钮，获得您的位置：</p><button onclick="getLocation()">试一下</button><div id="mapholder"></div><script src="http://maps.google.com/maps/api/js?sensor=false"></script>//调取谷歌地图API<script>var x=document.getElementById("demo");function getLocation()  {  if (navigator.geolocation)    {    navigator.geolocation.getCurrentPosition(showPosition,showError);    }  else{x.innerHTML="Geolocation is not supported by this browser.";}  }function showPosition(position)  {  lat=position.coords.latitude;//纬度  lon=position.coords.longitude;//经度  latlon=new google.maps.LatLng(lat, lon)//生成一个谷歌地图的对象  mapholder=document.getElementById('mapholder')  mapholder.style.height='250px';  mapholder.style.width='500px';//设置地图展示区域大小  var myOptions={  center:latlon,zoom:14,  mapTypeId:google.maps.MapTypeId.ROADMAP,  mapTypeControl:false,  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}  };  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);//地图对象  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});//生成地图  }function showError(error)//错误处理  {  switch(error.code)     {    case error.PERMISSION_DENIED:      x.innerHTML="User denied the request for Geolocation."      break;    case error.POSITION_UNAVAILABLE:      x.innerHTML="Location information is unavailable."      break;    case error.TIMEOUT:      x.innerHTML="The request to get user location timed out."      break;    case error.UNKNOWN_ERROR:      x.innerHTML="An unknown error occurred."      break;    }  }</script></body></html>