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


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 编程引入命名空间的方法
Jun 29 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
JS实现打砖块游戏
Feb 14 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 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
JavaScript Archive Network 集合
2007/05/12 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
JS实现微信摇一摇原理解析
2017/07/22 Javascript
js html实现计算器功能
2018/11/13 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
Python实现的rsa加密算法详解
2018/01/24 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python发展史及网络爬虫
2019/06/19 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
HTML5标签大全
2016/11/23 HTML / CSS
幼儿园大班新学期寄语
2014/01/18 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
党员政治学习材料
2014/05/14 职场文书
2014年司机工作总结
2014/11/21 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python