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


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 相关文章推荐
JS清除选择内容的方法
Jan 29 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
8个JS的reduce使用实例和reduce操作方式
Oct 05 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
js 操作select相关方法函数
2009/12/06 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
python实现简易云音乐播放器
2018/01/04 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python实现批量修改文件名
2020/03/23 Python
Jupyter加载文件的实现方法
2020/04/14 Python
用Python制作音乐海报
2021/01/26 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
简单说说tomcat的配置
2013/05/28 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
环境科学专业大学生自荐信格式
2013/09/21 职场文书
心理健康教育心得体会
2013/12/29 职场文书
低碳生活倡议书
2014/04/14 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
小学运动会开幕词
2015/01/28 职场文书
高中物理教学反思
2016/02/19 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android