开发学院网页设计 JavaScript google map api 与jquery结合使用－－控件,监听器... 阅读

google map api 与jquery结合使用－－控件,监听器

　2010-09-14 13:29:45　来源：WEB开发网　　　

核心提示：Google Maps JavaScript API可以让您在自己的网页上使用Google地图.在使用API之前，您应该先申请一个API key,申请API key请到：http://code.google.com/apis/maps/signup.html，google map api 与jquery结合使用－－控件

Google Maps JavaScript API可以让您在自己的网页上使用Google地图.在使用API之前，您应该先申请一个API key,申请API key请到：http://code.google.com/apis/maps/signup.html。这里假设你获取到的key是：ABQIAA。

关于jquery的获取不再此处累赘，网上有许多关于jquery的介绍。

接着我们就使用JQuery和Google Maps JavaScript API来结合表现一下google map的有趣的地图效果，进而达到熟悉Google Maps JavaScript API的目标。

先来个HelloChina:

(1)在html文件中编写html代码:

map.html

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 　　<html xmlns="http://www.w3.org/1999/xhtml"> 　　<head> 　　<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 　　<title>Google Maps 与 JQuery结合使用</title> 　　<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAA" type="text/javascript"></script> 　　<script type="text/javascript" src="jquery.js"></script> 　　<script type="text/javascript" src="map.js"></script> 　　</head> 　　<body> 　　<div id="map" style="top:100px;left:300px;width: 600px; height: 400px"></div> 　　<div id="message"></div> 　　</body> 　　</html>