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


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中将Object转换为String函数代码 (json str)
Apr 29 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
js中常用的Math方法总结
Jan 12 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
微信公众号生成新浪短网址的实现(快速生成)
Aug 18 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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里的JS打印函数
2006/10/09 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
Joomla开启SEF的方法
2016/05/04 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
电子商务专业学生的学习自我评价
2013/10/27 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
主题实践活动总结
2014/05/08 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
孩子教育的心得体会
2014/09/01 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
高中体育课教学反思
2016/02/16 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js