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


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 相关文章推荐
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
PHP新手上路(五)
2006/10/09 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
python中Mako库实例用法
2020/12/31 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
便利店投资创业计划书
2014/02/08 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
python process模块的使用简介
2021/05/14 Python
Redis性能监控的实现
2021/07/09 Redis
Python中的变量与常量
2021/11/11 Python