谷歌地图api的脚本文件无法用的解决办法
谷歌地图api的脚本文件无法用的解决办法
乱世中的单纯 发表于3年前
谷歌地图api的脚本文件无法用的解决办法
  • 发表于 3年前
  • 阅读 12
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 最近发现谷歌地图api不能用了,于是在网上找到了这篇文章,感觉很不错

       这篇文章主要介绍了谷歌地图打不开的解决办法,本文给出了一个可以正常使用的谷歌地图调用案例,需要的朋友可以参考下。

      谷歌地图被中国防火墙封杀,所以不用直接引用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事件快呈现出谷歌地图。

示例代码:

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

 

共有 人打赏支持
粉丝 10
博文 59
码字总数 32792
×
乱世中的单纯
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: