分享个谷歌地图API实现多标签(多marker),带分页

来源:互联网 发布:数据库可视化工具acce 编辑:程序博客网 时间:2024/06/05 00:22

我自己做的还是带分页,

代码很多,不全贴了,有问题可以问我。

<script type="text/javascript" src="http://www.eju.com/js/global/jquery-1.6.1.min.js"></script>
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
 
    <script type="text/javascript">    
      var map;
      var map1;
      var lat = <%= modShop_Info.MapX%>;
      var lng = <%= modShop_Info.MapY%>;
      var latlngs = new Array();
      var shopsname = new Array();
      var latx = new Array();
      var lngy = new Array();
      var myLatLng = new google.maps.LatLng(<%= modShop_Info.MapX%>,<%= modShop_Info.MapY%>);
      var shopsMarkerArray = new Array();
      var myLatLngArray = "<%=this.latlngs%>";          
      var shopsnameArray = "<%=this.shopsname%>";
      latslngs = myLatLngArray.split('*');
      shopsname = shopsnameArray.split('*');         
      var markersArray = [];
      var windowArray = [];
             
      function showshops(){
        var shopsDiv = document.getElementById('mapcanvas1');
        map1 = new google.maps.Map(shopsDiv,{
        center: new google.maps.LatLng(lat,lng),
        zoom:13,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        });
        setMarkers(map1,latslngs,shopsname);
        }
        function setMarkers(map1,latslngs,shopsname){
             for(var i = 0;i<=<%=this.lengh%>;i++){
             var shopsnames = shopsname[i];
             var shoplatlngs = latslngs[i];
             latx = latslngs[i].split(',')[0];
             lngy = latslngs[i].split(',')[1];             
             var mylatlngs = new google.maps.LatLng(latx,lngy);
             var marker = new google.maps.Marker({
             position:mylatlngs,
             map:map1,
             title:shopsnames
             });
            }
           }    
 
       
            //删除叠加层
      function deleteOverlays() {
          if (markersArray) {
            for (i in markersArray) {
              markersArray[i].setMap(null);
            }
            markersArray.length = 0;
          }
      }
  
      //关闭信息提示窗口
      function closeWindows() {
          if (windowArray) {
            for (i in windowArray) {
                windowArray[i].close();
            }
          }
         }
       
      function show(results){
          parent.deleteOverlays();
          windowArray.length = 0;
          for (var i = 0; results && i < results.length; i++) {
              showOne(results[i]);
          }
      }
      function showOne(){
          var infowindow = new google.maps.InfoWindow({
              content: result.html
            });
            var marker = new google.maps.Marker({
                position: mylatlng,
                map: map
            });
            markersArray.push(marker);
            windowArray.push(infowindow);
            google.maps.event.addListener(marker, 'click', function() {
              closeWindows();
              infowindow.open(map,marker);
            });
      }
      google.maps.event.addDomListener(window, 'load', showshops);
</script>

原创粉丝点击