调用google地图

foohsinglong

浏览: 221183 次
性别:
来自: 魔都

最近访客更多访客>>

asyuanbo

rocky514

olewaLdeisi

sdywcd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java
JavaScript

引言:今天一个朋友问我象51job那样的地图怎样实现的,我就网上收集了大家两个简单的使用方法
A.这个非常简单,是静态的
具体参考:
http://code.google.com/intl/zh-CN/apis/maps/documentation/staticmaps/

<html>
<head>
</head>
<body>
<img  src='http://maps.google.com/maps/api/staticmap?center=39.9942100,116.3645000,13&zoom=14&size=512x512&maptype=roadmap
&markers=color:blue|label:S|39.987889,116.350029&markers=color:green|label:G|39.9942100,116.3645000
&markers=color:red|color:red|label:C|39.987889,116.350029&sensor=false'/>
</body>
</html>

B.这个应用非常实用,但不是很简便,是动态的

<html>  
<head>  
<title>Google Map API</title>  
<script src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA6vpS801yIrtuIMuUfP_1LRSxsn5a65eZaAi_5C9z2RjNFFY5KBSBb4uXgDPOoqPTKZ5RfZHQ1HTweA&sensor=true" type="text/javascript"></script>   
              
              
<script type="text/javascript">   
  
var map;  //当前的地图对象  
  
//初始化  
  function load() {  
    
    if (GBrowserIsCompatible()) {  
      map = new GMap2(document.getElementById('map_canvas'));  
        
      // 给地图添加内置的控件，分别为：  
      // 平移及缩放控件（左上角）、比例尺控件（左下角）、缩略图控件（右下角）  
      map.addControl(new GLargeMapControl());  
      map.addControl(new GScaleControl());  
      map.addControl(new GOverviewMapControl());  
        
       // 将视图移到点的位置  
      map.setCenter(new GLatLng(39.987889,116.350029), 13);  
        
      //手动创建一个标注  
      var point = new GLatLng(39.9942100, 116.3645000);   
      var marker=new GMarker(point);  
     map.addOverlay(marker);       
      
        GEvent.addListener(marker, 'click',   
            function() {  
                var div=document.createElement("div");  
                div.innerHTML=document.getElementById("descs1").innerHTML;  
              marker.openInfoWindow(div);  
            }  
        );  
          
        //当在地图单击时加入创建一个新的标注  
        GEvent.addListener(map, 'click', onMapClick);  
    }  
  }  
    
  function onMapClick(marker, point) {    
  if (marker)  
    return;  
  // 创建标注，并添加到链表中  
  var newMarker = new GMarker(point, {draggable: true});  
//  alert(point);  
  map.addOverlay(newMarker);  
  //为新的标注加入注释  
  GEvent.addListener(newMarker, 'click', function(){onMarkerClick(newMarker,point)});  
}  
  
function onMarkerClick(marker,point) {   
  // 为气泡提示窗口创建动态 DOM 对象，这里我们用 DIV 标签  
 // alert(typeof(marker)+","+typeof(point));  
  var div = document.createElement('div');  
  div.style.fontSize = '10.5pt';  
  div.style.width = '250px';  
  div.appendChild(  
    document.createTextNode(document.getElementById("pDesc").value+",坐标:"+formatLatLng(point)));  //formatLatLng(point) 获取坐标的函数  
      
  var hr = document.createElement('hr');  
  hr.style.border = 'solid 1px #cccccc';  
  div.appendChild(hr);  
    
  // 创建“删除”按钮  
  var lnk = document.createElement('div');  
  lnk.innerHTML = "删除";  
  lnk.style.color = '#0000cc';  
  lnk.style.cursor = 'pointer';  
  lnk.style.textDecoration = 'underline';  
    
  // 为“删除”按钮添加事件处理：调用 removePoint() 并重新计算距离  
  lnk.onclick =  
    function() {  
      map.closeInfoWindow();  
      map.removeOverlay(marker);  
    };  
  div.appendChild(lnk);    
  // 当用户关闭气泡时 Google Map API 会自动释放该对象   
  marker.openInfoWindow(div);  
}  
  
//格式化经纬度  
function formatLatLng(pt) {  
   
  var latName, lngName;  
  var lat = pt.lat();  
  var lng = pt.lng();  
  latName = lat >= 0 ? '北纬' : '南纬';  
  lngName = lng >= 0 ? '东经' : '西经';  
  
  return lngName + formatDegree(lng) + '，'   
    + latName + formatDegree(lat);  
}  
//格式化度数  
 function formatDegree(value) {  
  value = Math.abs(value);  
  var v1 = Math.floor(value);  
  var v2 = Math.floor((value - v1) * 60);  
  var v3 = Math.round((value - v1) * 3600 % 60);  
  return v1 + '°' + v2 + '\'' + v3 + '"';  
}  
    </script>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>  
  
<body onLoad="load()" onUnload="GUnload()">   
  <div>点击地图可以创建新的标注,在创建新标注前先加入注解:<br>  
    <textarea id="pDesc" style="width:600px; height:50px"></textarea>  
</div>  
<div id="map_canvas" style="width: 1024px; height: 600px"></div>   
      
    <div id="targetDescs" style="display:none">  
  <div id="descs1">  
    <img src='http://www.catalogeasy.cn/images/index_r2_c3.jpg'><br><a href='http://www.xxxxxx.com'>XXXXX有限公司</a> 联系电话：010-XXXXXX18  
    </div>  
</div>  
</body>   
  
</html>

具体参考:
http://code.google.com/intl/zh-CN/apis/maps/

C.这是转自vifix的博客的谷歌地图应用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>地理位置坐标转换</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAe3YR_oZq7RQougOHlEQYxRTrT8HRiYVHGz6s-cexYhuHznMTnBQJ3hrfCSvSmQ_Fqr80B62kDy8djA&sensor=true" type="text/javascript"></script>
    <script type="text/javascript">
    window.g = {};
    window.$ = function(id){return document.getElementById(id)};
    window.onload = function() {
        if (GBrowserIsCompatible()) {

            g.map = new GMap2($("map"));
            g.map.addControl(new GLargeMapControl());
            g.map.addControl(new GMapTypeControl());
            g.map.addControl(new GScaleControl());

            g.geocoder = new GClientGeocoder();

            g.getCoordinates = function(address) {
                g.geocoder.getLatLng(
                    address,
                    function(point) {
                        if (point)
                        {
                            g.map.setCenter(point, 13);
                            var marker = new GMarker(point);
                            g.map.addOverlay(marker);
                            var info = "<strong>" + address + "</strong><br />坐标: " + point.lat() + "," + point.lng();
                            $("info").innerHTML = info;
                            marker.openInfoWindowHtml(info);
                            marker.__address_info = info;
                            GEvent.addListener(marker, "click", function() {
                                g.map.setCenter(this.getLatLng());
                                this.openInfoWindowHtml(this.__address_info);
                                $("info").innerHTML = info;
                            });
                        }
                        else
                        {
                            alert("无法解析: " + address);
                        }
                    }
                )
            }

            $("btn_go").onclick = function(){
                g.getCoordinates($("address").value);
            }
            $("btn_go").onclick();
        }
        else {
            alert('不支持的浏览器');
        }
    }
    window.onunload = function(){
        GUnload();
    }
    </script>
    <style media="screen">
    body{
        margin:0;
        padding:0;
        font-size:9pt;
        line-height:1.5em;
    }
    #frame{
        width:700px;
        margin:20px auto 10px;
    }
    #form{
        margin:0 0 10px;
        text-align:center;
    }
    #form input{
        border:1px solid #ccc;
        font-size:9pt;
        width:200px;
    }
    #form button{
        font-size:9pt;
        border:1px solid #ccc;
    }
    #form button:hover{
        background:#eef;
    }
    #map{
        height:400px;
        margin:0 0 10px;
        border:5px solid #ccc;
    }
    #vifix{
        text-align:center;
    }
    #vifix a{
        color:#f00;
        text-decoration:none;
    }
    #vifix a:hover{
        color:#f96;
    }
    </style>
</head>

<body>
    <div id="frame">
        <div id="form">
            输入一个地址: <input id="address" value="杭州市西湖三潭印月" /> <button id="btn_go">获取坐标</button>
        </div>
        <div id="map"></div>
        <div id="info">
        </div>
        <div id="vifix">
            Powered by <a href="http://code.google.com/apis/maps/" target="_blank">Google Map API</a> / Created by <a href="http://vifix.cn">vifix.cn</a>
        </div>
    </div>
</body>

[img]http://dl.iteye.com/upload/attachment/551622/3bbf51f6-3014-331a-a951-f71d3a9a43dc.jpg[/img]

</html>

具体参考:
http://vifix.cn/blog/convert-address-to-coordinates-google-map-api.html