谷歌地图打不开的解决办法


Posted in Javascript onAugust 07, 2014

谷歌地图被中国防火墙封杀,所以不用直接引用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>
Javascript 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
element多个表单校验的实现
May 27 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 #Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 #Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 #Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 #Javascript
js触发select onchange事件的小技巧
Aug 05 #Javascript
jquery中each遍历对象和数组示例
Aug 05 #Javascript
js 动态修改css文件的方法
Aug 05 #Javascript
You might like
多php服务器实现多session并发运行
2006/10/09 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
PHP反射学习入门示例
2019/06/14 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Python2中的raw_input() 与 input()
2015/06/12 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Python类中self参数用法详解
2020/02/13 Python
python微信公众号开发简单流程实现
2020/03/09 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
党支部书记先进事迹
2014/01/17 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
2015年加油站工作总结
2015/05/13 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
解决mysql的int型主键自增问题
2021/07/15 MySQL
Nginx如何配置根据路径转发详解
2022/07/23 Servers