google map的应用示例 -

luckyjaky

浏览: 114479 次
性别:
来自: 深圳

最近访客更多访客>>

geosir

xiyuzhimo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

google map的应用示例

博客分类：

Google Maps

Google JavaScript XHTML Microsoft HTML

Google提供了丰富的google map api，虽然好丰富，但我不怎么看得懂，还是直接看他的示例的源代码才部分看懂，自己就做了以下的例子。经纬度坐标可以直接从google map获取，查询你要的某个位置，然后地图右上角有个“链接”按钮，代码里面就包含了经纬度了，呵呵

如果从来没了解过google map api的话，还是先去看看他的API好，有些基础的东西必须了解的，

·<body onload="initialize()" onunload="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">

   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 onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

这是修改玩的

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(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 onload="initialize()" onunload="GUnload()">


<div id="map_canvas" style="width: 500px; height: 500px;/*position:absolute;z-index:9;*/"></div>

<hr>
获取中心经纬度:<span id=zoomnum></span>
</body>
</html>

分享到：

Google Map API | js乱码解决方法

2009-03-26 10:45
浏览 2613
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

google map的应用示例

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

google map的应用示例

评论

发表评论

相关推荐

Gponit和GLatLng的区别

Google Map API

Google Map API介绍

在ASP.NET中使用Google Maps

最近访客更多访客>>