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


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给input和textarea设定ie中的focus
May 29 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 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
967 个函式
2006/10/09 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
个人借款协议书范本
2014/11/17 职场文书
好人好事新闻稿
2015/07/17 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技