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


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完美拖拽,可返回拖动轨迹
Mar 29 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 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
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
vue+iview动态渲染表格详解
2019/03/19 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
若干个Java基础面试题
2015/05/19 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
环保主题班会教案
2015/08/13 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL