读书人

在自己网站下调用googlemap

发布时间: 2012-10-12 10:17:04 作者: rapoo

在自己网站上调用google地图

<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.catalogeasy.com'>恺亿讯捷科技有限公司</a> 联系电话:010-82381418    </div></div></body> </html> 

读书人网 >Web前端

热点推荐