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


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 相关文章推荐
面向对象Javascript核心支持代码分享
May 23 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
JavaScript Reflect Metadata实现详解
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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php str_pad 函数用法简介
2009/07/11 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
推荐dojo学习笔记
2007/03/24 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
在Python的Django框架中编写编译函数
2015/07/20 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
python如何使用代码运行助手
2020/07/03 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
党员批评与自我批评(5篇)
2014/09/23 职场文书
2014年团总支工作总结
2014/11/21 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书