1. 首頁
  2. 問答
  3. 谷歌地圖中的狀態欄

谷歌地圖中的狀態欄

2013-05-04 65 views

回答

0 
<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 4.01//EN"> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Where Am I?</title> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script type="text/javascript" src="geometa.js"></script> 
<style type="text/css"> 
    *, html { margin:0; padding:0 } 
    div#map_canvas { width:100%; height:100%; } 
    div#info { width:100%; position:absolute; overflow:hidden; text-align:center; top:0; 
    left:0; } 
    .lightBox { 
    filter:alpha(opacity=60); 
    -moz-opacity:0.6; 
    -khtml-opacity: 0.6; 
    opacity: 0.6; 
    background-color:white; 
    padding:2px; 
    } 
</style> 
<script type="text/javascript"> 
    var map; 
    function initialise() { 
    var latlng = new google.maps.LatLng(-25.363882,131.044922); 
    var myOptions = { 
     zoom: 4, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.TERRAIN, 
     disableDefaultUI: true 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    prepareGeolocation(); 
    doGeolocation(); 
    } 

    function doGeolocation() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(positionSuccess, positionError); 
    } else { 
     positionError(-1); 
    } 
    } 

    function positionError(err) { 
    var msg; 
    switch(err.code) { 
     case err.UNKNOWN_ERROR: 
     msg = "Unable to find your location"; 
     break; 
     case err.PERMISSION_DENINED: 
     msg = "Permission denied in finding your location"; 
     break; 
     case err.POSITION_UNAVAILABLE: 
     msg = "Your location is currently unknown"; 
     break; 
     case err.BREAK: 
     msg = "Attempt to find location took too long"; 
     break; 
     default: 
     msg = "Location detection not supported in browser"; 
    } 
    document.getElementById('info').innerHTML = msg; 
    } 

    function positionSuccess(position) { 
    // Centre the map on the new location 
    var coords = position.coords || position.coordinate || position; 
    var latLng = new google.maps.LatLng(coords.latitude, coords.longitude); 
    map.setCenter(latLng); 
    map.setZoom(12); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: latLng, 
     title: 'Why, there you are!' 
    }); 
    document.getElementById('info').innerHTML = 'Looking for <b>' + 
     coords.latitude + ', ' + coords.longitude + '</b>...'; 

    // And reverse geocode. 
    (new google.maps.Geocoder()).geocode({latLng: latLng}, function(resp) { 
       var place = "You're around here somewhere!"; 
      if (resp[0]) { 
       var bits = []; 
      for (var i = 0, I = resp[0].address_components.length; i < I; ++i) { 
       var component = resp[0].address_components[i]; 
       if (contains(component.types, 'political')) { 
        bits.push('<b>' + component.long_name + '</b>'); 
       } 
      } 
      if (bits.length) { 
       place = bits.join(' > '); 
      } 
      marker.setTitle(resp[0].formatted_address); 
     } 
     document.getElementById('info').innerHTML = place; 
     }); 
    } 

    function contains(array, item) { 
     for (var i = 0, I = array.length; i < I; ++i) { 
       if (array[i] == item) return true; 
     } 
     return false; 
    } 

</script> 
</head> 
<body onload="initialise()"> 
    <div id="map_canvas"></div> 
    <div id="info" class="lightbox">Detecting your location...</div> 
</body> 
</html>

來源

2013-05-05 16:58:34

相關問題

 相關問題