分享

如何把地图导航添加到网站中【标注接口】 - 站长资讯 模板建站 CMS SEO 采集 伪原...

 极地居士 2010-09-15


在很多时候,您需要您的用户标出一个位置,比如:一个房地产网站,用户在登记新楼盘的时候,就需要在地图上标出这个楼盘的位置,这个时候就可以用到本接口。

  地图标注接口(EZMarker API)是我要地图网(51ditu.com)新推出的地图标注接口,利用该接口,您就可以轻松的实现在地图上标注位置、采集位置信息等操作。如图所示案例:





  点击查看示例

  返回顶部 如果您希望自己编写脚本,来访问和处理标注接口中的值,那么标注接口提供了相应的方法和事件来满足您的需求。

  代码示例如下: <table> <tr><td colspan='2'>如何获取标注接口的值</td></tr>

  <tr><td>经度</td><td><input type="text" id="x" name="x"></td></tr>

  <tr><td>纬度</td><td><input type="text" id="y" name="y"></td></tr>

  <tr><td>比例尺级别</td><td><input type="text" id="z" name="z"></td></tr>

  </table>

  <script language="JavaScript">

  <!--

  //setMap是ezmarker内部定义的接口,这里可以根据实际需要实现该接口

  function setMap(point,zoom)

  {

  document.getElementById("x").value=point.getLongit ude();

  document.getElementById("y").value=point.getLatitu de();

  document.getElementById("z").value=zoom;

  }

  var ezmarker = new LTEZMarker("pos");

  LTEvent.addListener(ezmarker,"mark",setMap);//"mar k"是标注事件

  //-->

  </script> 如果您希望在使用标注接口的时候,标注接口只显示指定城市的地图,或着说默认为您指定城市的地图,而不是全国地图,您可以通过以下代码示例实现该功能。 为标注接口指定默认城市,如果没有指定,则默认为全国地图。<br>

  在用户没有标注之前,用户选择哪个城市作为标注接口默认显示城市都可以。<br>

  但当用户标注后,标注接口显示的地图将是用户标注时的地图。

  <p>

  请选择城市:<br>

  <input onclick="javascript:setCity();" type="radio" name="city" value="beijing">北京<br>

  <input onclick="javascript:setCity();" type="radio" name="city" value="shanghai">上海<br>

  <input onclick="javascript:setCity();" type="radio" name="city" value="tianjin">天津<br>

  <input onclick="javascript:setCity();" type="radio" name="city" value="chongqing">重庆<br>

  <br>

  <script language="JavaScript">

  <!--

  var ezmarker = new LTEZMarker("ezmarker");

  function setCity(){

  var collection;

  collection = document.all["city"];

  for (i=0;i<collection.length;i++) {

  if (collection[i].checked){

  var c = collection[i].value;

  ezmarker.setDefaultView(c,7);

  break;

  }

  }

  }

  //-->

  </script> 如果您希望将用户选择地点的地理坐标值,直接发送到您的服务端,只需要将以下代码放在用来给服务器发送内容的表单(Form)之中即可。 点击查看示例

  在这种情况下,当用户点击按钮发送该表单的时候,EZMarker中的地理信息将和其他的Form信息一起被发送给服务器,服务器将会收到EZMarker通过Form传递的如下内容: 无论用GET还是POST方式,都能适用。

  注意,其中的"ezmarker"是您创建EZMarker时构造器中的参数,假如您在页面上使用了两个EZMarker,例如第二个为: 那么服务器将收到ezmarker1.x,ezmarker1.y,和ezmarker1.z与之相对应。 搜索控件是标注接口的一个扩展控件,用来向用户提供搜索功能,以便于用户能够快速的定位到自己想要的位置。

  您可以通过LTEZMarker的setSearch方法来为标注接口添加或取消搜索功能(默认自带搜索控件),该方法的详细说明见类参考。

  以下是一个简单的范例: <script language="javascript"> var ez=new LTEZMarker("ezmarker"); ez.setDefaultView("beijing",5);//地图默认定位到北京

  ez.setSearch(true,"北京");//在地图上显示搜索控件,并将默认搜索城市指定为北京

  </script> 地图搜索控件是标注接口的又一个扩展控件,用来向用户提供快捷的定位功能,用户可以通过该控件快捷的找到自己所在的城市。

  您可以通过LTEZMarker的setPlaceList方法来为标注接口添加或地图搜索功能(默认自带地图搜索控件),该方法的详细说明见类参考。

  以下是一个简单的范例: 假如您同时添加了搜索控件和地图搜索控件,则地图搜索控件同时可以更改搜索城市,因此用户可以在选择的任意一个城市进行搜索。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多