Html5 之 Google地图

秒速五厘米 2022-03-17 10:48 544阅读 0赞

<!DOCTYPE html>
    <html>
    <body>
    <p id="demo">显示地图</p>
    <button οnclick="getLocation()">获取地图信息</button>
    <div id="mapholder"></div>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <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:true,   //显示卫星地图和普通地图
      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>