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


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中遭遇级联表达式陷阱
Mar 08 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 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延迟静态绑定示例分享
2014/06/22 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
简单实现js浮动框
2016/12/13 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
vue-music关于Player播放器组件详解
2017/11/28 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
python 调用win32pai 操作cmd的方法
2017/05/28 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python 用下标截取字符串的实例
2018/12/25 Python
python3.5的包存放的具体路径
2020/08/16 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
满月酒答谢词
2014/01/14 职场文书
优秀学生获奖感言
2014/02/15 职场文书
微信营销策划方案
2014/02/24 职场文书
人事任命通知
2015/04/20 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python