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


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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
基于jquery实现省市联动效果
Nov 23 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
vue实现评论列表功能
Oct 25 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 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
10款实用的PHP开源工具
2015/10/23 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
获取body标签的两种方法
2011/10/13 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python中title()方法的使用简介
2015/05/20 Python
python中常用的九种预处理方法分享
2016/09/11 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
查看keras的默认backend实现方式
2020/06/19 Python
普通院校学生的自荐信
2013/11/27 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
小学生春游活动方案
2014/08/20 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL