google map开发学习笔记（一）

最新推荐文章于 2024-03-03 12:18:59 发布

xo_zhang

最新推荐文章于 2024-03-03 12:18:59 发布

阅读量995

点赞数

分类专栏： google map 文章标签： google map开发学习笔记一

google map 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Google地图相信大家都用过，Google提供很多的API允许你把Google地图的功能嵌入到你自己的网站上去，我们做Google map的二次开发简单来说就是使用Google map的API在自己网站上来实现类似Google地图这样的功能。

第一步：要做Google map开发首先得申请Google 地图 API 密钥。

什么是Google地图API密钥呢？看Google的官方解释：Google 地图 API 使您能够将 Google Maps 嵌入自己的网页中。一个地图 API 密钥只对一个“目录”或域有效。我的理解就是一个类似于认证注册之类的东西，申请以后才可以使用，如果出问题我可以通过这个找到你或者通知这样子。

第二步：申请完以后就可以做开发了，废话少说，上代码：

[xhtml] view plain copy print ?

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<mce:script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false" mce_src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false"
type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
function initialize() {
//检查浏览器兼容性
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
}
}
// --></mce:script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width:800px;height:600px;"></div>
</body>
</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" xmlns:v="urn:schemas-microsoft-com:vml">
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Maps JavaScript API Example</title>
    
     
    <mce:script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false" mce_src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAChdCrN7wC9izi2oT-RnZVBQJamtJgghXUNimK5S1pZ0gfcTvLxTipoO9NuARtlJJIzXyxbfbVzVaAA&sensor=false" 
            type="text/javascript"></mce:script>
     
    <mce:script type="text/javascript"></mce:script> 
  </head>
   
  <body οnlοad="initialize()" οnunlοad="GUnload()"> 
    <div id="map_canvas" style="width:800px;height:600px;"></div> 
  </body> 
</html>

代码简解：

var map = new GMap2(document.getElementById("map_canvas"));

GMap2这是一个JavaScript对象，这是我们开发的核心对象，暂且叫它为地图对象，我们传入一个页面的Div节点作为现实地图的容器，这个Div定义了大小，所以Div的大小即是地图的大小。

map.setCenter(new GLatLng(39.9493, 116.3975), 13);

完了之后调用对象的setCenter方法，有两个参数，第一个是表示地理坐标的对象，另一个是缩放级别，它大概在0到19之间，根据地区不同范围也不同，总之北美那边级别多一些，到我们国家就级别少一些。

详细请参考：http://code.google.com/intl/zh-CN/apis/maps/documentation/introduction.html

分享到：

xo_zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google map开发学习笔记（一）

Google地图相信大家都用过，Google提供很多的API允许你把Google地图的功能嵌入到你自己的网站上去，我们做Google map的二次开发简单来说就是使用Google map的API在自己网站上来实现类似Google地图这样的功能。第一步：要做Google map开发首先得申请Google 地图 API 密钥。什么是Google地图API密钥呢？看Google的官方解
复制链接

扫一扫

专栏目录