Google maps API开发（一）
最近做一个小东西用到google map，突击了一下，收获不小，把自己学习的一些小例子记录下来吧
一、加载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>
每天进步一点点... 
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 使用C#创建一个MCP客户端
· ollama系列1：轻松3步本地部署deepseek，普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 按钮权限的设计及实现