html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

谷歌地图打不开的解决办法_javascript技巧_

[ ] 已经帮助:人解决问题

谷歌地图被中国防火墙封杀,所以不用直接引用http://maps.googleapis.com/maps/api/js?sensor=false&language=en这域名下的谷歌地图api,而是改为http://maps.google.cn/maps/api/js?sensor=false这个地址,google.cn在国内的域名没有被封杀,可以使用。r9iHTML5中文学习网 - HTML5先行者学习网

注意:google.cn虽然可以使用,但是会输出部分js引用到google.com的资源,导致地图呈现会延时,所以不要将谷歌地图api放到你的内容前面,如head标签里面,而是放到内容或者html结束标签最后,防止你的页面内容一直是空白,浏览器无法显示内容。r9iHTML5中文学习网 - HTML5先行者学习网

也不要用window.onload事件来绘制,要不谷歌地图显示不及时,因为要加载google.com的资源,而google.com资源被拦截,会导致知道请求超时(大概2分钟)才会绘制出谷歌地图。r9iHTML5中文学习网 - HTML5先行者学习网
r9iHTML5中文学习网 - HTML5先行者学习网

使用谷歌的回调参数来传递一个回调函数名称,经测试这样比使用window.onload事件快呈现出谷歌地图。r9iHTML5中文学习网 - HTML5先行者学习网

r9iHTML5中文学习网 - HTML5先行者学习网

示例代码:r9iHTML5中文学习网 - HTML5先行者学习网

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

r9iHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助