谷歌地圖被中國防火墻封殺,所以不用直接引用http://maps.googleapis.com/maps/api/js?sensor=false&language=en這域名下的谷歌地圖api,而是改為http://maps.google.cn/maps/api/js?sensor=false這個地址,google.cn在國內的域名沒有被封殺,可以使用。
注意:google.cn雖然可以使用,但是會輸出部分js引用到google.com的資源,導致地圖呈現會延時,所以不要將谷歌地圖api放到你的內容前面,如head標簽里面,而是放到內容或者html結束標簽最后,防止你的頁面內容一直是空白,瀏覽器無法顯示內容。
也不要用window.onload事件來繪制,要不谷歌地圖顯示不及時,因為要加載google.com的資源,而google.com資源被攔截,會導致知道請求超時(大概2分鐘)才會繪制出谷歌地圖。
使用谷歌的回調參數來傳遞一個回調函數名稱,經測試這樣比使用window.onload事件快呈現出谷歌地圖。
示例代碼:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >網站引用谷歌地圖打不開解決辦法:使用google.cn</ title > </ head > < body > < div id = "map_canvas" class = "map" style = "height: 350px;width: 500px;" ></ div ></ body > < script type = "text/javascript" src = "http://maps.google.cn/maps/api/js?sensor=false&callback=renderGoogleMap" ></ script > < script type = "text/javascript" > function renderGoogleMap() { var geocoder = new google.maps.Geocoder(); geocoder.geocode({ 'address': '廣西桂林市中心廣場' }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); } else { alert("Geocode was not successful for the following reason: " + status); } }); var mapOptions = { zoom: 17, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } </ script > </ body > </ html > |