2014-04-10 39 views
0

考慮這個fiddle。裝載問題背後的技術解釋是什麼?Google Maps API加載問題。需要技術解釋。應該很容易回答

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}); 
} 
} 
//]]> 
+0

當你說「問題」時,你的意思是沒有看到任何負載? –

+0

是的,我更新了小提琴。 – PHPglue

+0

你有一堆重命名,只是讓你的代碼難以閱讀的人跳進去。我發現實例化'google.maps.Map'缺少'new',但你修復了這個問題。我無法發現問題,但使用鼠標滾輪時,在控制檯中出現'未捕獲的RangeError:最大調用堆棧大小超過錯誤',因爲我正在縮放。 –

回答

0

你忘了設置中心時,您需要設置初始位置的縮放級別。 :)

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

你是對的,當它是簡單的東西。

+0

謝謝你。現在我知道這是必需的。我想他們會有一些默認的縮放。 – PHPglue