Google提供了丰富的google map api,虽然好丰富,但我不怎么看得懂,还是直接看他的示例的源代码才部分看懂,自己就做了以下的例子。经纬度坐标可以直接从google map获取,查询你要的某个位置,然后地图右上角有个“链接”按钮,代码里面就包含了经纬度了,呵呵
如果从来没了解过google map api的话,还是先去看看他的API好,有些基础的东西必须了解的,
·<body οnlοad="initialize()" οnunlοad="GUnload()">要释放内存,
·<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">在描绘汽车路径的线的时候必须要定义这个
·<script src="http://ditu.google.com/maps?file=api&v=2" type="text/javascript"></script>这个环境必须要有,v=2是版本
好了,我说再多也不如亲自去看看google的官方API
<!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 地图 JavaScript API 示例: 简单的地图</title>
<script src="http://ditu.google.com/maps?file=api&v=2" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas")); //新建一个地图
map.setMapType(G_NORMAL_MAP);//定义地图类型,如卫星或平面地图
map.setCenter(new GLatLng(22.684212,114.077654), 13); //定义地图中心坐标
var blueIcon = new GIcon(G_DEFAULT_ICON); //新建一个图标
blueIcon.image = "http://www.mobanwang.com/icon/UploadFiles_8971/200805/20080521131500198.gif"; //定义图标地址
blueIcon.iconSize=new GSize(20, 20); //定义图标大小
markerOptions = { icon:blueIcon };// 设置 GMarkerOptions 对象
//map.disableDragging(); //禁止拖动
map.addControl(new GScaleControl()); //加入比例工具
map.addControl(new GSmallZoomControl()); //加入缩放工具
//map.openInfoWindow(map.getCenter(),"<h1>文字</h1>"); //地图载入时打开信息窗口
point=new GLatLng(22.684212,114.077654) //经纬度
var marker = new GMarker(point, markerOptions); //新建一个标记
map.addOverlay(marker) //叠加一个层
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<span style='font-size:12px'>香港电子库存</span><br><img src=http://www.dyx-elec.com/101260/Image/Web/2>");
});//加入一个点击事件,点击就打开信息窗口
}
}
</script>
</head>
<body οnlοad="initialize()" οnunlοad="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></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 地图 JavaScript API 示例: 简单的地图</title>
<script src="http://ditu.google.com/maps?file=api&v=2" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas")); //新建一个地图
map.setMapType(G_NORMAL_MAP);//定义地图类型,如卫星或平面地图
map.setCenter(new GLatLng(22.541118,114.089971), 17); //定义地图中心坐标
map.enableScrollWheelZoom()//启用使用鼠标滚轮缩放
map.enableDoubleClickZoom() //启用双击缩放地图
//map.disableDragging(); //禁止拖动
//map.addControl(new GScaleControl()); //创建比例工具
//map.addControl(new GSmallZoomControl()); //创建缩放工具
map.addControl(new GLargeMapControl()); //创建带有可在四个方向平移、放大、缩小的按钮以及缩放滑块的控件。
//加入标记图标
var blueIcon = new GIcon(G_DEFAULT_ICON); //新建一个图标
blueIcon.image = "http://ditu.google.com/intl/zh-CN_cn/mapfiles/ms/micons/purple-pushpin.png"; //定义图标地址
blueIcon.iconSize=new GSize(32, 32); //定义图标大小
blueIcon.shadow = "http://ditu.google.com/intl/zh-CN_cn/mapfiles/shadow50.png"; //定义图标地址
markerOptions = { icon:blueIcon };// 设置 GMarkerOptions 对象
//map.openInfoWindow(map.getCenter(),"<h1>文字</h1>"); //地图载入时打开信息窗口
point=new GLatLng(22.541118,114.089971) //经纬度
var marker = new GMarker(point, markerOptions); //新建一个标记
map.addOverlay(marker) //叠加一个层
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("<span style='font-size:12px'>香港电子库存</span><br><img src=http://www.dyx-elec.com/101260/Image/Web/2>");
});//加入一个点击事件,点击就打开信息窗口
GEvent.addListener(map, "move", function() {
document.getElementById("zoomnum").innerHTML=map.getCenter();
});//加入一个地图移动就出发事件
point=new GLatLng(22.54101913812432, 114.08801794052124) //经纬度
var marker1 = new GMarker(point, markerOptions); //新建一个标记
map.addOverlay(marker1) //叠加一个层
//加入标记图标
}
}
</script>
</head>
<body οnlοad="initialize()" οnunlοad="GUnload()">
<!--<div style="position:relative;height:500px">-->
<!--<div style="position:absolute;left:0;top:0;z-index:10;left:246px;top:201px;"><font color=red>+</font></div>-->
<div id="map_canvas" style="width: 500px; height: 500px;/*position:absolute;z-index:9;*/"></div>
<!--</div>-->
<hr>
获取中心经纬度:<span id=zoomnum></span>
</body>
</html>