[Flex]Flex地图制作

第一部:http://www.uncool.cn/blogs/read.php/166.htm  From UNCOOL.CN
     第二部:http://www.uncool.cn/blogs/read.php/167.htm  From UNCOOL.CN
     第三部:http://www.uncool.cn/blogs/read.php/169.htm  From UNCOOL.CN  
     第四部:http://www.uncool.cn/blogs/read.php/213.htm  From UNCOOL.CN  
     首先插播广告,这些教程是我UYang(www.uncool.cn/blogs)所写,地图API是来自cnflex.org站长SILVER所开发,如果你想更加牛B哄哄的开发出更牛B哄哄哄的程序,基础资料可以去cnflex.org论坛上寻找。


    从 前面的四篇,我们已经知道怎么把地图弄出来,怎么放大,缩小,移动,切换,加标签。一切可以应用到实例的基本功能我们都已经知道了,那么从这篇开始就是慢 慢的向实际应用靠拢,我的这个一系列教程最后的结果就是一个完整的实际应用程序,当然只是一个程序的最初DEMO并不包括服务器,你可以根据你的想法再进 行加工,加上服务器内容等,只不过那个就不属于FLEX的范畴了,你喜欢什么服务器语言就用哪种,所谓的八仙过海,各显神通。
      言归正 传,实际应用,我们第一部需要解决的是数据问题,我们需要显示那个点,或者在表格里点击,然后地图转向那个坐标点。一切的一切都是需要最初的数据,无论你 是后台哪种数据模式,最后的也是最重要的就是那个坐标点的信息,他到底在哪里?他的X轴,Y轴坐标在哪里?只有解决了这个,那么后面的程序才可以走下去。 所以这篇的DEMO属于参考DEMO,就是显示当前中心点的位置。很简单,先看下完成的DEMO
    
      
       按照前面4个教程,我需要的是你在FLEX面板上加上这么一句

<mx:VBox  right="20" y="347">      
    <mx:FormItem label="lng坐标:">
        <mx:TextInput text="" id="lng"  width="100"/>
    </mx:FormItem>
    <mx:FormItem label="lat坐标:">
        <mx:TextInput text="" id="lat"  width="100"/>
    </mx:FormItem>
  </mx:VBox>

       就是显示所谓的坐标点的界面,有两个id,一个是lng,一个是lat.是用来显示当前的lng坐标和lat坐标,比如定位地址就是靠lng坐标和lat坐标。
       某地 = (lng,lat);
      上海的:(121.45382,31.24717);
      北京的:(116.37819,39.92374);
      以上两个坐标点,都是我通过移动中心点而得到的数据,当然还是有点小偏差。
      那么我们如何在移动地图的时候,能够准确的得到中心点的坐标呢,其实这个更加简单了。在updateCenter()这个构造函数里,如果忘了,可以看以前教程的代码。在这个构造函数里加上下面这两句:

     lng.text = currentLngLat.x.toString() ;
     lat.text = currentLngLat.y.toString();

      新的完整的updateCenter()就变成:

private function updateCenter(event:MapUpdateCenterEvent):void{
         currentLngLat.x = event.lng;
         currentLngLat.y = event.lat;
         lng.text = currentLngLat.x.toString() ;
         lat.text = currentLngLat.y.toString();
       }

    这样这个第五部分的教程算是结束了,很简单,也很重要,所以就单独的成一个教程。下一部就是讲在点击表格里的数据后,地图直接转向那个坐标。由于这个系列教程写的时间过长,写的有点脱节,我会尽量在这个星期把这个教程完结掉。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏