google map的应用示例

luckyjaky · 发表于 2013-2-7 21:06:28

Google提供了丰富的google map api，虽然好丰富，但我不怎么看得懂，还是直接看他的示例的源代码才部分看懂，自己就做了以下的例子。经纬度坐标可以直接从google map获取，查询你要的某个位置，然后地图右上角有个“链接”按钮，代码里面就包含了经纬度了，呵呵
如果从来没了解过google map api的话，还是先去看看他的API好，有些基础的东西必须了解的，
·<body  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&amp;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&amp;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  onunload="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&amp;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  onunload="GUnload()">
    

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

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

		自动登录	找回密码
密码			立即注册