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


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的网页SELECT下拉框美化代码
Oct 28 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
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
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
vue中的inject学习教程
2019/04/24 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
python发腾讯微博代码分享
2014/01/10 Python
pyside写ui界面入门示例
2014/01/22 Python
python中执行shell的两种方法总结
2017/01/10 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
详解python列表(list)的使用技巧及高级操作
2019/08/15 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
全球最大的服务市场:Fiverr
2017/01/03 全球购物
结婚典礼证婚词
2014/01/08 职场文书
村官学习十八大感想
2014/01/15 职场文书
安全隐患整改报告
2014/11/06 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang