gmap3初试

最新推荐文章于 2024-08-13 16:15:07 发布

weixin_33794672

最新推荐文章于 2024-08-13 16:15:07 发布

阅读量114

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/myshop/blog/141585

版权

为什么80%的码农都做不了架构师？>>>

http://gmap3.net/

<html>    
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>        
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="../gmap3.js"></script> 
    <style>
      body{
        text-align:center;
      }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 100%;
        height: 100%;
      }
    </style>
    
    <script type="text/javascript">
      $(function(){
      
        $("#test").gmap3({
          marker:{
            latLng: [31.230393,121.473704],
            options:{
              draggable:true
            },
            events:{
              dragend: function(marker){
                $(this).gmap3({
                  getaddress:{
                    latLng:marker.getPosition(),
                    callback:function(results){
                      var map = $(this).gmap3("get"),
                        infowindow = $(this).gmap3({get:"infowindow"}),
                        content = results && results[1] ? results && results[1].formatted_address : "no address";
                      if (infowindow){
                        infowindow.open(map, marker);
                        infowindow.setContent(content);
                      } else {
                        $(this).gmap3({
                          infowindow:{
                            anchor:marker, 
                            options:{content: content}
                          }
                        });
                      }
                    }
                  }
                });
              }
            }
          },
          map:{
            options:{
              zoom: 18
            }
          }
        });
        
      });
    </script>
  <body>
    <div id="test" class="gmap3"></div>
    drag & drop the marker to see the address
  </body>
</html>

转载于:https://my.oschina.net/myshop/blog/141585