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


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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
javascript中this关键字详解
2016/12/12 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
Python3处理文件中每个词的方法
2015/05/22 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python读取Excel的方法实例分析
2015/07/11 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
二手房购房协议书范本
2014/10/05 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
python实现双链表
2022/05/25 Python
pandas中pd.groupby()的用法详解
2022/06/16 Python