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

这篇博客展示了如何使用谷歌地图API实现多标记显示,并结合分页功能。作者提供了一段JavaScript代码,包括设置地图、创建标记、处理分页及信息窗口等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我自己做的还是带分页,

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

<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>

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值