zoukankan      html  css  js  c++  java
  • 使用google map v3添加经纬度信息

    http://s8186255.iteye.com/blog/758678

         V3版的Google map,从提供的代码结构而言,更加模块化,链式操作的感觉也不错,关键代表了未来,所以掌握其使用方法自然 重要。

        与地图相关的应用开发中,常用的技术是将经纬度录入到后台库中,显示的时候,读出经纬度,通过google提供的js,将你关注的点在地图上画出来。或者可以画出更多的东西,比如线、多边形。

        以往基于专业地图系统如mapinfo、esri、中地地图系统等开发应用软件,面临的最大问题是地图信息的更新,基于google map这个云计算平台,一切担忧可以消解。

        废话少说,现在举一个简单的例子:当我们点击地图的时候,可以获取经纬度信息,并录入到后台系统中。比如我们将一个照片放在地图的某个点,就需要如此的应用。

    js准备,准备好jquery和google的js;

    <script type="text/javascript" charset="utf-8" src="/javascripts/jquery1.4.2.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


    html准备;


           


           
           

    .....


    前面的div是地图的显示位置大小;

    客户化的js代码准备:主要解决页面载入干什么、点击地图干什么的问题;

    //放置marker
      function placeMarker(location) {
        var clickedLocation = new google.maps.LatLng(location);
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });
        markersArray.push(marker);

    //这里根据用户操作,将经纬度取出来,并复制到input中。
        $("#geo-lat").val(marker.getPosition().lat());
        $("#geo-lng").val(marker.getPosition().lng());

      };

    //清除marker,这个函数需要使用,不然你的鼠标点击之处,都有标记,而你只需要一个。
       function clearMarkersBefore() {
        if (markersArray) {
          for (i in markersArray) {
            markersArray[i].setMap(null);
          }
          markersArray.length = 0;
        }
      };


    //这以下是载入页面要做的事情:初始化,同时在地图上增加一个事件;
      $(function(){
        //初始化地图
        mapInit();
        google.maps.event.addListener(map, 'click', function(event) {
          clearMarkersBefore();
          placeMarker(event.latLng);
        });
      });

    后面两个是经纬度;

    后台准备;

    这里可以使用任何后台程序,获取两个hidden input的值,进行后期处理即可。


    提示:

    1、在实现的过程中,与v2不同的是对点击地图形成多个marker的处理,最终发现这种采用数组的处理方式最好。

    2、我的后台是rails,我还是坚持我的观点,rails开发应用在开发的时候,界面方面要减少个性化的东西,比如rjs、比如支持google map ym4r等插件,直接使用javascript(jquery)。
    <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
    阅读(2136) | 评论(0) | 转发(0) |
    给主人留下些什么吧!~~
    评论热议
  • 相关阅读:
    一本通课后练习 / 高手训练
    毒瘤 dp 题做题记录
    埃及分数
    CF340E Iahub and Permutations
    NOI2020 SDOI 爆零记
    Codeforces *1400-1600 做题记录
    Codeforces Round #636 (Div 3) 题解
    Codeforces Round #634 (Div 3) 题解
    洛谷 P4231 三步必杀
    【洛谷】【线段树+位运算】P2574 XOR的艺术
  • 原文地址:https://www.cnblogs.com/ztguang/p/12647300.html
Copyright © 2011-2022 走看看