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


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 相关文章推荐
JQuery each()嵌套使用小结
Apr 18 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
js面向对象的写法
Feb 19 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 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中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python之re操作方法(详解)
2017/06/14 Python
python下载微信公众号相关文章
2019/02/26 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
公司门卫的岗位职责
2014/02/19 职场文书
社会公德演讲稿
2014/05/20 职场文书
市场策划求职信
2014/08/07 职场文书
课外小组活动总结
2014/08/27 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
经理助理岗位职责
2015/02/02 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android