google map 开发(2)- 数组循环加载多个标记

来源:互联网 发布:java class类 编辑:程序博客网 时间:2024/05/22 05:20

这节内容主要讲如何用JSON数组显示多个图标


如果想看上一节内容请点击 google map 开发 (1)- 新建一个地图及标记


//创建JSON数组

var arr=[{"machine_number":"1","latitude":"39.1613","longitude":"117.2147","address":"天津"},
{"machine_number":"2","latitude":"39.904239","longitude":"116.407392","address":"北京"}];


//循环添加图标

function setMarckers(map,locations){
    for(var i = 0;i < locations.length;i++){
        var number = locations[i].number;
        var longitude = locations[i].longitude;
        var latitude = locations[i].latitude;
        var address = locations[i].address;
        var title = '编号:' + number + '<br/>经度:'+longitude+'<br/>纬度:'+latitude+'<br/>地址:'+address;
        var mylatlng = new google.maps.LatLng(latitude,longitude);
        var marker = new google.maps.Marker({                    
            position: mylatlng,                    
            map: map                 
        });
        set_event(map,marker,title);
    }    
    function set_event(map,marker,title){
        //设置窗口显示信息
        var infowindow = new google.maps.InfoWindow({                    
            content: title
        });
        //注册图标事件
        google.maps.event.addListener(marker,'mouseover',function() {    
                infowindow.open(map,marker);
        });               
        google.maps.event.addListener(marker, 'mouseout',function() {                  
                infowindow.close();
        });
    }

}



原创粉丝点击