`
daoyongyu
  • 浏览: 125872 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

加載GOOGLE地圖時報錯

阅读更多
            加載GOOGLE地圖的js文件時報錯
    这是我的第一篇博客,写的不好请大家多多包涵。今天在做一个页面中加入GOOGLE地图时遇到一个问题,当我按照google map 开发者指南上面的步骤进行操作后,在浏览器中预览时,页面就总是出现JS的错误,缺少分号。
我挺郁闷的,在另外的页面都可以,但在我这个的页面它就不行。刚开始我就找我其它
JS函数是不是有缺少分号的。仔细看了一遍,都没有。这就怪了。没办法,那就用最简单也最
有效的办法看是哪里的JS出错。(将加载地图的JS函数单独拿到一个新的页面)。还是不行,我就想我这个页面和其它页面有哪里不同。错误是在加载google的JS文件时出错。是不是字符编码的问题,导致浏览器在解析引入的JS函数出现乱码呢。仔细一对比,嘿,还真是不一样
GOOGLE的地图在编码为UTF-8上的页面就可以运行,而我的页面编码是BIG5,所以会出错。
<meta http-equiv="Content-Type" content="text/html; charset=big5"/>

应该如何解决呢?后来我在常见问题中找到了答案,原来GOOGLE默认的输入和输出字符是utf-8.如果你的页面的编码设定是utf-8!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

那么引入js文件时直接copy就可以了!
如下:
<script src="http://ditu.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
            type="text/javascript"></script>

其中的key要换成自己申请的。
但是如果你的页面不是utf-8,而是其它如big5.那么你就的加一个参数。
如下:
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;oe=big5&amp;key=ABQIAAAAJ7m7zfwC_O2Z3sznvnehhBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQRLKM1RWutv26B1U2XhyK6NoDZA" type="text/javascript"></script>

注意,这两段引入的代码有三个地方不同。
1. 首先是key不同,这个不用说。

2.  一个src="http://ditu.google.com/maps,
     一个src="http://maps.google.com/maps。
    这两个第一个代表的是大陆,另一个代表的是我们的台湾地区。每个地区的地图服务器是不一样的
3. 第二个引入的JS中多一个参数oe=big5,这是设定google的JS文件的输出编码,这个就是要和您的页面设定的编码要一致。否则就会遇到我那个同样的问题。另外还可以用ie=big5,设定它的输入编码。

好了,以上就是我今天的一点心得。写出来一是给自己一个总结,另外可以为有需要的朋友节省一点时间。另外下面是google的开发者指南的网址。做地图时可以参考一下。

http://code.google.com/intl/zh-CN/apis/maps/documentation/introduction.html

[url]  http://ianjung1974.blogspot.com/2008/06/google-maps-api.html[/url]

[url]  http://ianjung1974.blogspot.com/2008/07/google-maps-api.html[/url]
google的地圖工具包
http://code.google.com/p/gmaps-utility-library/

google的地圖api討論組

http://groups.google.com/group/Google-Maps-API-China/topics?start=0&sa=N


分享到:
评论

相关推荐

    vue+openlayers简单示例

    你可以根据需要替换其他地图源,如Google Maps或Bing Maps,或者添加自定义图层。 此外,Vue和OpenLayers结合的好处在于,你可以利用Vue的状态管理(如Vuex)和响应式特性,实现更复杂的功能,如动态加载图层、添加...

    NeighborhoodMap:优达学城 P5。 邻里地图

    有一张谷歌地图,Ct 中心有一颗星星。 我还向您展示了 CT 的当前温度 在左侧,您将看到 FourSquare 对康涅狄格州的首选,在地图下方,您将看到纽约时报关于康涅狄格州的文章。 如果您单击 FourSquare 建议之一,...

    moving-companion:Udacity课程介绍Ajax课堂工作-使用Wikipedia,《纽约时报》和Google Maps API学习Ajax

    在本课程的项目中,Ajax将被用来动态加载地图信息,比如搜索地点、获取路线,提升地图应用的交互性。 **课程实践** 在"moving-companion"项目中,学生将创建一个综合应用,整合Wikipedia、《纽约时报》和Google ...

    ajax-api-requests-exercise:处理 AJAX 请求的 Javascript 练习,使用纽约时报、维基百科和谷歌街景

    在本项目"ajax-api-requests-exercise"中,我们探讨了使用JavaScript进行AJAX(Asynchronous JavaScript and XML)请求来与不同的API交互,包括纽约时报API、维基百科API和谷歌地图API。这个练习旨在帮助开发者熟悉...

    minicourse-ajax-project:Udacity AJAX 课程介绍

    在该项目中,你将学习如何利用AJAX与不同的API(Application Programming Interface)进行数据交换,具体包括谷歌地图API、维基百科API和纽约时报API。这些API提供了丰富的数据资源,如地理位置信息、百科条目和新闻...

    Your-Moving-Companion:使用 google、wiki 和 nytimes API 的网站

    结合描述中的"使用 google、wiki 和 nytimes API",我们可以推测这个项目利用了谷歌(Google)、维基百科(Wiki)和《纽约时报》(The New York Times)的公开API,来集成各种信息资源,可能包括地图导航、知识查询...

    web 2.0 解密

    例如,谷歌地图可以与房地产数据结合,创建出一个房地产搜索引擎,让用户在地图上查找房源。 Web 2.0的另一个重要概念是长尾理论,它描述了互联网如何使小众市场变得重要。在传统零售业,由于存储和展示空间有限,...

    ajaxStudy:API 游乐场

    通过Ajax,可以实现用户在地图上点击某个位置后,动态加载对应的街景视图。API需要调用特定的URL,并传递经纬度信息,返回的是一个嵌入式的全景图片或者街景小人图标。 **NYT API** 纽约时报(NYT)提供了一系列...

Global site tag (gtag.js) - Google Analytics