首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

高德地图 api用例

2012-11-26 
高德map api用例可实现右键点位!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//ENhttp://www.w3

高德map 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">  <head>    <meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Hello, world</title>  <style type="text/css">      html { height:100% }      body { height:100%; margin:0px; padding:0px }      #container { height:90%;width:90%; padding-left:10px }  </style>  <script type="text/javascript"  src="http://api.amap.com/webapi/init?v=1.1">  </script>     <script type="text/javascript">  var $ = function(id){return document.getElementById(id);}var decode = function(lnglat){if (lnglat.indexOf(',') == -1){alert("经纬度格式错误"); return {  lng: 0 ,lat: 0}   }else{var s = lnglat.split(','); return {  lng: s[0],  lat: s[1]  }   }}    function lnglatQuery() {  $("container").innerText = "";var lnglat = $("lnglat").value.trim();var lng = decode(lnglat).lng;var lat = decode(lnglat).lat;var mapObj = new AMap.Map("container"); // 创建地图实例  mapObj.plugin(["AMap.ToolBar","AMap.OverView,AMap.Scale"], function() {    // 加载工具条  tool = new AMap.ToolBar({        direction: true, // 隐藏方向导航  ruler: false, // 隐藏视野级别控制尺  autoPosition: false // 禁止自动定位  });  mapObj.addControl(tool);      }); var marker = new AMap.Marker({  id:"m",  position: new AMap.LngLat(lng,lat),  offset: new AMap.Pixel(0,0),  icon: "http://api.amap.com/webapi/static/Images/marker_sprite.png"  });//设置可以拖拽marker.setDraggable(true);//绑定marker拖拽事件mapObj.bind(marker,"dragend",function(e){ $("lnglat").value = e.lnglat; });mapObj.addOverlays(marker );  mapObj.bind(mapObj,"rightclick",function(e){var lnglat = e.lnglat;marker.setPosition(lnglat);$("lnglat").value = lnglat; }); // 自定义构造AMap.Marker对象          var point = new AMap.LngLat(lng,lat); // 创建点坐标         mapObj.setCenter(point); // 设置地图中心点坐标        } var geocoderOption = {  range:300, // 范围  crossnum:2, // 道路交叉口数  roadnum :3, // 路线记录数  poinum:1 // POI点数     };  var geocoder = new AMap.Geocoder(geocoderOption);  function mechantQuery(){var address = $('uname').value; geocoder.geocode(address,function(data){   var lng = data.list[0].x; var lat = data.list[0].y;  $("lnglat").value = lng+"," + lat;  lnglatQuery();}); } </script>  </head>      <body>  <p>商户名称:<input type="text" name="uname" id="uname" value="北京中关村" size="40" /> <input type="button" name="btn_uname" value="查询" onclick="mechantQuery()"/>经纬度:<input type="text" name="lnglat" id="lnglat" value="116.404, 39.915" size="40" /> <input type="button" name="btn_lat_lng" value="查询" onclick="lnglatQuery()" /></p>    <div id="container"></div>   </body>  </html> 


热点排行