google 地图api开发循环多叠加层标记实例（二）

朴灿烈づ我的快乐病毒、 2024-02-19 20:34 43阅读 0赞

代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="/jquery/1.9.1/jquery.min.js"></script>
    <script
    		src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&language=en-US&v=3.26&sensor=false">
    </script>	
    </head>
    <body>
    <div id="container">
    	<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
    </div>
    
    <script type="text/javascript">
        var myCenter=new google.maps.LatLng(39.67265743179042,116.53268392603445);
        //var myCenter1=new google.maps.LatLng(50.508742,-1.120850);
        //var t = '<?php echo $google_controller_data;?>';
        //var points=eval("("+ t +")");
    
           var points = [
               {"lng":116,"lat":40,"url":"http://www.baidu.com","id":50,"name":"p1"},
               {"lng":117,"lat":31,"url":"http://www.taobao.com","id":2,"name":"p2"},
               {"lng":116,"lat":34,"url":"http://www.qq.com","id":3,"name":"p3"}
           ];
        function initialize()
        {
            var mapProp = {
                center:myCenter,
                zoom:8,
                streetViewControl:true,
                mapTypeId:google.maps.MapTypeId.ROADMAP
            };
    
            var map=new google.maps.Map(document.getElementById("map"),mapProp);
            pointsLen = points.length;
            var google_points=[];
            var marker;
            for(var i = 0,pointsLen = points.length;i <pointsLen;i++)
                {
    				//定义icon图标
    				var iconstr;
    				if(points[i].onlineflag == 1){
                        iconstr = "<?php echo SYS_UI_URL;?>images/icon.png"
    				}
                    google_points[i] = new google.maps.LatLng(points[i].lat,points[i].lng);
                    marker=new google.maps.Marker({
                        position:google_points[i],//显示位置
                        //animation:google.maps.Animation.BOUNCE,//动态
    					map:map,
                        icon:iconstr//换图片
                    });
                    var googlecontent = showInfo(points[i]);
                   // var googlecontent = "<div>地址：aaaaa"+i+"</div>";
                    clickMarker(marker,googlecontent);
                }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    	function clickMarker(marker,googlecontent){
            google.maps.event.addListener(marker,'click',function(){
                var infowindow = new google.maps.InfoWindow();
                infowindow.setContent(googlecontent);
                infowindow.open(map,marker);
            });
    	}
        //显示信息窗口，显示标注点的信息。
        function showInfo(point){
            var sContent =
                '<ul class="info_ul">'
                +'<li class="info_li">'
                +'<span class="info_span">id：</span>' + point.id + '</li>'
                +'<li class="info_li">'
                +'<span class="info_span">名称：</span>' + point.name + '</li>';
                +'</ul>';
            return sContent;
        }
    </script>
    </body>
    </html>

开发过程遇到的问题：

1、循环显示标注的时候总是显示最后一个：解决方法：不要把click事件放到循环里面去，需要单独拿出来写个如上代码的clickMarker函数