快捷導(dǎo)航

谷歌地圖打不開的解決辦法

更新時(shí)間：2014年08月07日 11:49:31 投稿：junjie

這篇文章主要介紹了谷歌地圖打不開的解決辦法,本文給出了一個(gè)可以正常使用的谷歌地圖調(diào)用案例,需要的朋友可以參考下

谷歌地圖被中國防火墻封殺，所以不用直接引用http://maps.googleapis.com/maps/api/js?sensor=false&language=en這域名下的谷歌地圖api，而是改為http://maps.google.cn/maps/api/js?sensor=false這個(gè)地址，google.cn在國內(nèi)的域名沒有被封殺，可以使用。

注意：google.cn雖然可以使用，但是會(huì)輸出部分js引用到google.com的資源，導(dǎo)致地圖呈現(xiàn)會(huì)延時(shí)，所以不要將谷歌地圖api放到你的內(nèi)容前面，如head標(biāo)簽里面，而是放到內(nèi)容或者h(yuǎn)tml結(jié)束標(biāo)簽最后，防止你的頁面內(nèi)容一直是空白，瀏覽器無法顯示內(nèi)容。

也不要用window.onload事件來繪制，要不谷歌地圖顯示不及時(shí)，因?yàn)橐虞dgoogle.com的資源，而google.com資源被攔截，會(huì)導(dǎo)致知道請(qǐng)求超時(shí)（大概2分鐘）才會(huì)繪制出谷歌地圖。

使用谷歌的回調(diào)參數(shù)來傳遞一個(gè)回調(diào)函數(shù)名稱，經(jīng)測(cè)試這樣比使用window.onload事件快呈現(xiàn)出谷歌地圖。

示例代碼：

<!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>網(wǎng)站引用谷歌地圖打不開解決辦法:使用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': '廣西桂林市中心廣場(chǎng)' }, 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>

您可能感興趣的文章:

相關(guān)文章

List the Codec Files on a Computer
List the Codec Files on a Computer...
2007-06-06
Javascript之高級(jí)數(shù)組API的使用實(shí)例
今天小編就為大家分享一篇關(guān)于Javascript之高級(jí)數(shù)組API的使用實(shí)例，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-03-03
JavaScript 中Date對(duì)象的格式化代碼方法匯總
JavaScript默認(rèn)的時(shí)間格式我們一般情況下不會(huì)用，所以需要進(jìn)行格式化，下面小編給大家?guī)砹巳Njs date對(duì)象格式化實(shí)例代碼，需要的朋友參考下吧
2017-09-09
表單input項(xiàng)使用label同時(shí)引用Bootstrap庫導(dǎo)致input點(diǎn)擊效果區(qū)增大問題
這篇文章主要介紹了表單input項(xiàng)使用label，同時(shí)引用Bootstrap庫，導(dǎo)致input點(diǎn)擊效果區(qū)增大問題的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10
javascript中數(shù)組的常用算法深入分析
這篇文章主要給大家介紹了關(guān)于javascript中數(shù)組的常用算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
學(xué)習(xí)使用Bootstrap頁面排版樣式
這篇文章主要教大家學(xué)習(xí)使用Bootstrap頁面排版樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
ES6知識(shí)點(diǎn)整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用示例
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之?dāng)?shù)組解構(gòu)和字符串解構(gòu)的應(yīng)用,結(jié)合實(shí)例形式分析了ES6數(shù)組解構(gòu)和字符串解構(gòu)的實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-04-04
webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解
這篇文章主要介紹了webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
javascript實(shí)現(xiàn)點(diǎn)擊圖片切換功能
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊圖片切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的canvas合成圖片功能,結(jié)合實(shí)例形式分析了微信小程序canvas合成圖片相關(guān)組件使用、操作步驟與注意事項(xiàng),需要的朋友可以參考下
2019-05-05