Question

以下是我在同一页面上创建 jsfiddle Sample 多个地图的内容。

我几乎都在“重复”自己，因为这种方式让我自己更容易阅读，我的JavaScript技能比初学者好一点，还在学习。

我知道我可以创建像

这样的对象

var maps ={
    ['latlng', 48.89376,2.33742],
    ['latlng1', 40.73717,-73.9],
    ['latlng2', -8.79069, 115.15927],
}

让生活更轻松。但我不知道如何让物体工作。

这是我的代码

function initialize() {
        var latlng = new google.maps.LatLng(48.89376,2.33742); //1 location
        var latlng1 = new google.maps.LatLng(40.73717,-73.98439); //2 location
        var latlng2 = new google.maps.LatLng(-8.79069, 115.15927); //3 location

        var settings = {
            zoom: 15,
            center: latlng,
            disableDefaultUI: true,
            zoomControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
         var settings1 = {
            zoom: 15,
            center: latlng1,
            disableDefaultUI: true,
            zoomControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

       var settings2 = {
            zoom: 15,
            center: latlng2,
            disableDefaultUI: true,
            zoomControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"), settings);
        var map1 = new google.maps.Map(document.getElementById("map1"), settings1);
        var map2 = new google.maps.Map(document.getElementById("map2"), settings2);

        var marker=new google.maps.Marker({
              position:latlng,
              });
         marker.setMap(map);

         var marker1 =  new google.maps.Marker({
              position:latlng1,
              });
         marker1.setMap(map1);

        var marker2 =  new google.maps.Marker({
              position:latlng2,
              });
         marker2.setMap(map2);
    }


google.maps.event.addDomListener(window, 'load', initialize);

如果有人可以帮助我使用对象来改进它，并且将来更容易添加更多地图或更改latlng。非常感谢

Answer 1

尝试

function setup(el, lat, lng){
    var latlng = new google.maps.LatLng(lat, lng); //1 location
    var settings = {
        zoom: 15,
        center: latlng,
        disableDefaultUI: true,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById(el), settings);

    var marker=new google.maps.Marker({
        position:latlng,
    });
    marker.setMap(map);

    return marker;
}

function initialize() {
    setup('map', 48.89376, 2.33742)
    setup('map1', 40.73717, -73.98439)
    setup('map2', -8.79069, 115.15927)
}


google.maps.event.addDomListener(window, 'load', initialize);

演示：Fiddle

Answer 2

我在初始化函数中做了所有事情，但你可以很容易地分开来包装不同的谷歌地图功能（即设置标记，显示地图等）。 http://jsfiddle.net/tYqa9/

function Map(lat,long,div) {

    this.latlng = new google.maps.LatLng(lat,long);
    this.div = div;
    this.marker = new google.maps.Marker({
                      position:this.latlng,
                  });
    this.settings =  {
        zoom: 15,
        center: this.latlng,
        disableDefaultUI: true,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(document.getElementById(this.div), this.settings);
    this.marker.setMap(this.map);

}



function initialize() {
    var latlng = [{lat:48.89376,lng:2.33742,div: 'Fred'},
             {lat:40.73717,lng:-73.98439,div:'George'},
             {lat:-8.79069,lng:115.15927,div:'Betty'}],
        myMap = [];
    for(i=0;i<latlng.length;i++) {
        myMap.push(new Map(latlng[i].lat,latlng[i].lng,latlng[i].div));
    }           
}


google.maps.event.addDomListener(window, 'load', initialize);

没有重复自己，智能循环与对象

2 个答案: