谷歌地图的状态栏答案

【问题标题】：Status bar in google map谷歌地图的状态栏
【发布时间】：2013-05-04 15:18:59
【问题描述】：

我想在这张地图的顶部做一个状态栏像这样：http://gmaps-samples-v3.googlecode.com/svn/trunk/geolocate/geolocate.html 你能告诉我怎么做吗，谢谢。

【问题讨论】：

您为什么不从您喜欢的地图中的代码开始，因为它可以满足您的需求？保存 HTML 文件（仅限 HTML）并确保它可以正常工作，然后从那里进行调整。

【解决方案1】：

<!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>

【讨论】：