Question

我需要在一个页面上放置10个以上的地图。问题：如何优化此代码以使其更短？我想做的是，如果可能的话，重用一些代码使其更精简，所以只有“LatLng”和内容“contentString”等变量才会发生变化。

Here's a FIDDLE showing two maps and a very long code for these two

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions = {
    zoom: 16,
    center: myLatlng
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var contentString = '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
  '<div id="bodyContent">'+
  '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
  'sandstone rock formation in the southern part of the '+
  'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
  'south west of the nearest large town, Alice Springs; 450&#160;km '+
  '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
  'features of the Uluru - Kata Tjuta National Park. Uluru is '+
  'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
  'Aboriginal people of the area. It has many springs, waterholes, '+
  'rock caves and ancient paintings. Uluru is listed as a World '+
  'Heritage Site.</p>'+
  '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
  'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
  '(last visited June 22, 2009).</p>'+
  '</div>'+
  '</div>';

    var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 300
    });

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
    });
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
    });
}

$(function() {
    $('#button01').click(function() {
        $('#map-canvas').show(function() {
            initialize();
        });
    });
});

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


function initialize02() {
    var myLatlng02 = new google.maps.LatLng(-20.363882,131.044922);
    var mapOptions02 = {
      zoom: 4,
      center: myLatlng02
    };

    var map02 = new google.maps.Map(document.getElementById('map-canvas02'), mapOptions02);

    var contentString02 = '<div id="content">'+
   '<div id="siteNotice">'+
   '</div>'+
   '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
   '<div id="bodyContent">'+
   '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
   'sandstone rock formation in the southern part of the '+
   'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
   'south west of the nearest large town, Alice Springs; 450&#160;km '+
   '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
   'features of the Uluru - Kata Tjuta National Park. Uluru is '+
   'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
   'Aboriginal people of the area. It has many springs, waterholes, '+
   'rock caves and ancient paintings. Uluru is listed as a World '+
   'Heritage Site.</p>'+
   '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
   'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
   '(last visited June 22, 2009).</p>'+
   '</div>'+
   '</div>';

 var infowindow02 = new google.maps.InfoWindow({
    content: contentString02,
    maxWidth: 300
 });

     var marker02 = new google.maps.Marker({
        position: myLatlng02,
        map: map02,
        title: 'Uluru (Ayers Rock)'
     });
     google.maps.event.addListener(marker02, 'click', function() {
       infowindow02.open(map02,marker02);
     });
 }

$(function() {
  $('#button02').click(function() {
    $('#map-canvas02').show(function() {
      initialize02();
    });
  });
 });

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

Google地图针对多个地图的变量优化/重复使用代码

0 个答案: