Google maps API开发(一)(转)
一、加载Google maps API
<script type="text/javascript"
src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"></script>
您可以到http://code.google.com/intl/zh-CN/apis/maps/signup.html注册申请自己的API
二、加载简单的Google地图
1、 加载Google地图
//声明一个GMap2全局变量
var map;
function load()
{
//检查浏览器的兼容性.
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map")); //加载地图
map.addControl(new GLargeMapControl()); //增加全功能控件
map.addControl(new GMapTypeControl()); //设置地图类型
map.enableScrollWheelZoom(); //设置地图支持滚轮
map.setCenter(new GLatLng(39.990168, 116.295304), 10); //设置地图的中心坐标
map.enableDoubleClickZoom(); //开启双击google map会自动放大.
map.enableScrollWheelZoom(); //开启滚动鼠标自动放大和缩小.
//
}
}
2、 添加一个创建GMarker的方法
function createMarker(baseIcon, point, html)
{
var icon = new GIcon(baseIcon);
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
return marker;
}
3、 调用这个GMarker方法
var icon = new GIcon(G_DEFAULT_ICON);
var point = new GPoint(116.429114, 39.934322);
var html = '<div ><font color="blue">HelloWorld!</font></div>';
var marker = createMarker(icon, point, html);
map.addOverlay(marker);
这样一个简单的HelloWorld就显示出来了
通过这个例子我们可以了解到GMap2、GMarker、GIcon这几个核心类的基本应用
最后看看我截得图:
这几天整理了一下V3的版本,V3相比V2还是有很大进步的,比如烦人的api引用,发布的时候非常不爽;清爽的api对象,比以前精简不少对象,但是功能却没有打折扣……还有很多等着我们去挖掘,总之是
用的非常爽,废话不多说了,实现同样的功能V3的代码如下:
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function load() {
var myLatlng = new google.maps.LatLng(39.934322, 116.429114);
var myOptions = {
//这里的参数可以为多个参数,具体参考MapOptions对象
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
//可以为多个参数,具体参考MarkerOptions对象
map: map,
position: myLatlng
});
google.maps.event.addListener(marker, 'click', function(event) {
//这里的infoWindow的参数可以为多个对象,具体可以参考InfoWindowOptions对象
var html = '<div ><font color="blue">HelloWorld!</font></div>';
var infowindow = new google.maps.InfoWindow({ content: html });
infowindow.open(map, marker);
});
}
</script>
</head>
<body onload="load()">
<table border="2" id="table1" bordercolor="#FF0000">
<tr>
<td>
<div id="map" style="width:800px; height:480px"></div>
</td>
</tr>
</table>
</body>
</html>
Google maps API开发(一)(转)的更多相关文章
- Google maps API开发
原文:Google maps API开发 Google maps API开发(一) 最近做一个小东西用到google map,突击了一下,收获不小,把自己学习的一些小例子记录下来吧 一.加载Googl ...
- Google maps API开发(二)(转)
这一篇主要实现怎么调用Google maps API中的地址解析核心类GClientGeocoder: 主要功能包括地址解析.反向解析.本地搜索.周边搜索等, 我这里主要有两个实例: 实例一.当你搜索 ...
- Google Maps API V3 之绘图库 信息窗口
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps API V3 之 图层
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps API V3 之 路线服务
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps API Web Services
原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Goo ...
- google maps api申请的问题
现在已经改由统一的GOOGLE API控制台进行所有GOOGLE API的管理了. 方法是使用Google帐号登入 https://code.google.com/apis/console. 然后在所 ...
- Google Maps API Key申请办法(最新)
之前的Google Maps Api的API Key很容易申请,只需要按照一个简单的表单提交部署的网站地址即可,自动生成API Key并给出引用的路径. 但是最近在处理另外一个项目的时候发现之前的这种 ...
- 如何插入谷歌地图并获取javascript api 秘钥--Google Maps API error: MissingKeyMapError
参考:https://blog.csdn.net/klsstt/article/details/51744866 Google Maps API error: MissingKeyMapError h ...
随机推荐
- 【众秒之门 JavaScript与jQuery技术精粹 #BOOK#】第4章 数据类型及定义
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- Java [Leetcode 242]Valid Anagram
题目描述: Given two strings s and t, write a function to determine if t is an anagram of s. For example, ...
- Android Service即四大组件总结
原文转载自:http://www.cnblogs.com/bravestarrhu/archive/2012/05/02/2479461.html Service 服务: 一个Service 是一段长 ...
- 3D魔方游戏
初学OpenGL时做的小程序,涉及到了OpenGL的大部分基本内容,如视图模型变换.色彩.纹理贴图.材质.光照.显示列表.选择等 三阶魔方有3×3×3个方块组成,每个方块的类当中都有一个4×4的矩阵, ...
- Docker系列(八)Kubernetes介绍
Kubernetes组件功能图 各组件说明: 节点 节点在Kubernetes由虚拟机或者实体机表示,常称为Minion,即从属主机.当一个节点加入到Kubernetes系统中时,它将会创建一个数 ...
- HDU-4689 Derangement DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4689 题意:初始序列1,2...n,求所有满足与初始序列规定大小的错排数目.. 这道题目感觉很不错~ ...
- HDU-4631 Sad Love Story 平面最近点对
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4631 数据是随机的,没有极端数据,所以可以分段考虑,最小值是一个单调不增的函数,然后每次分治算平面最近 ...
- hdfs里的文件下载HDFS之fsimage、metadata、edits、fstime(二十七)
首先,要有这个观念,元数据信息(fsimage + editslog). fsimage是在磁盘 metadata是在内存 ********************fsimage把内存的,序列化到磁盘 ...
- 使用grep要注意的地方
[maijunjin@localhost testGrep]$ ./ #没有结果 [maijunjin@localhost testGrep]$ . #没有结果 [maijunjin@localhos ...
- 射频识别技术漫谈(6)——通讯协议概述【worldsing笔记】
通讯协议是通讯的双方或多方在交流时遵守的规矩,包括谁先发起通讯,先交流什么,后交流什么,一方如何问,另一方如何答等.在这里通迅的双方指的是读写器和卡片. 首先是谁先发起通讯,很显然有两种,读写器先发言 ...