Question

考虑这个fiddle。加载问题背后的技术解释是什么？

index.php

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='description' content='test' />
    <title>test</title>
    <style type='text/css'>
      @import 'index.css';
    </style>
  </head>
<body class='njs'>
  <div id='fb-root'></div>
  <div id='map'></div>
  <div id='mapR'></div>
  <div class='fb-like' data-href='https://developers.facebook.com/docs/plugins/' data-send='true' data-width='450' data-show-faces='true'></div>
  <script type='text/javascript' src='//connect.facebook.net/en_US/all.js'></script>
  <script type='text/javascript' src='//maps.google.com/maps/api/js?sensor=true'></script>
  <script type='text/javascript' src='index.js'></script>
</body>
</html>

index.css

body{
  margin:0;
}
#map{
  height:700px; width:700px;
}

index.js

//<![CDATA[
var pre = onload;
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body, nav = navigator, IE = parseFloat(nav.appVersion.split('MSIE')[1]), geo = nav.geolocation, g = google.maps;
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version)bod.className = className;
}
function E(e){
  return doc.getElementById(e);
}
var m = E('map'), mR = E('mapR');
function geocoderErrors(r){
  var gs = g.GeocoderStatus, p;
  switch(r){
    case gs.OVER_QUERY_LIMIT:
      p = 'You have exceeded your query limit.';
      break;
    case gs.REQUEST_DENIED:
      p = 'Access denied.';
      break;
    case gs.INVALID_REQUEST:
      p = 'Your request was invalid.';
      break;
    default:
      p = 'No results were found for your request.';
  }
  mR.innerHTML = p;
}
function geolocationErrors(r){
  var gl = 'Geolocation ', p;
  switch(r.code){
    case r.PERMISSION_DENIED:
      p = gl+'Permission Denied.';
      break;
    case r.TIMEOUT:
      p =  gl+'Timed Out.';
      break;
    case r.UNKNOWN_ERROR:
      p = 'An unknown '+gl+'error has occurred.';
      break;
    default:
      p =  gl+'Position Unavailable.';
  }
  mR.innerHTML = p;
}
if(!geo || !nav.onLine){
  mR.innerHTML = 'Your Browser does not support Geolocation.';
}
else if(FB && g){
  var map = new g.Map(m, {center: new g.LatLng(47.6065495, -122.3328983), zoom:8}), cds, lat, lng;
  console.log(g); console.log(map);
  geo.watchPosition(function(p){
    cds = p.coords; lat = cds.latitude; lng = cds.longitude;
    map.setCenter(new g.LatLng(lat, lng));
  }, geolocationErrors, {enableHighAccuracy: true});
}
}
//]]>

Answer 1

设置中心时忘记了，您需要设置初始位置的缩放级别。：）

new g.Map(m, {zoom: 8, center: new g.LatLng(47.6065495, -122.3328983)})

当事情变得简单时，你是对的。

Google Maps API加载问题。需要技术解释。应该很容易回答

1 个答案: