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


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的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 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+SqlServer实现分页显示
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php格式化金额函数分享
2015/02/02 PHP
javascript 中that的含义示例介绍
2014/05/14 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
es6函数之严格模式用法实例分析
2020/03/17 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
分享一个常用的Python模拟登陆类
2015/03/29 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
介绍一下grep命令的使用
2012/06/28 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
大学生英语演讲稿
2014/04/24 职场文书
英语分层教学实施方案
2014/06/15 职场文书
庆七一活动总结
2014/08/27 职场文书
运动会主持词大全
2015/07/02 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python