需要帮助保持我的 Google 地图 API JS 代码干燥

Question

我可以轻松阅读和理解 Javascript，但我很难尝试编写自己的代码。因此，我遇到了 Google 地图 API 的一些代码，我为满足自己的目的而对其进行了修补，但是重复太多了。

我特别在谈论我必须将 .addListener 分别放置到每个标记的部分（接近代码块的末尾）。我在想 Array 会帮助清理东西，但我仍然不知道它是如何工作的。非常感谢任何帮助！

    <script>
    function initMap() {
    // Styles a map in night mode.
    var map = new google.maps.Map(document.getElementById('cc-qline-map'), {
      center: {lat: 50.1332, lng: -100.6700},
      zoom:4,
      mapTypeControl: false,
      scrollwheel: false,

      styles: [
        {elementType: 'geometry', stylers: [{color: '#222222'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#191919'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#d3d3d3'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d3d3d3'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d3d3d3'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#191919'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d3d3d3'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#d3d3d3'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#d3d3d3'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d3d3d3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#191919'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#191919'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d3d3d3'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#191919'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#191919'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#d3d3d3'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#222222'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#d3d3d3'}]
        }
      ]
    });

     var markerBc = new google.maps.Marker({
     position: {lat: 49.054201, lng: -122.383454},
     map: map,
     title: '30310-30360 Old Yale Rd, Abbotsford, BC V4X 2N7'
    });
    var markerBcText = '<div class="cc-map-text">'+
        '<h3>Q-Line Trucking</h3>'+
        '<h4>Abbotsford, British Columbia</h4>'+
        '<p>30310-30360 Old Yale Rd, Abbotsford, BC V4X 2N7</p>'+
    '</div>';
    markerBc.addListener('click', function() {
      new google.maps.InfoWindow({
        content: markerBcText,
      }).open(map, this);
    });




    var markerAb = new google.maps.Marker({
     position: {lat: 53.540016, lng: -113.797466},
     map: map,
     title: '#625-26409 TWP Road 525A, Acheson, AB T7X 5A6'
    });
    var markerAbText = '<div class="cc-map-text">'+
        '<h3>Q-Line Trucking</h3>'+
        '<h4>Acheson, Alberta</h4>'+
        '<p>#625-26409 TWP Road 525A, Acheson, AB T7X 5A6</p>'+
    '</div>';
    markerAb.addListener('click', function() {
      new google.maps.InfoWindow({
        content: markerAbText,
      }).open(map, this);
    });



    var markerSk = new google.maps.Marker({
     position: {lat: 52.172385, lng: -106.649831},
     map: map,
     title: 'PO Box 110-B RR#4, Corman Industrial Park Saskatoon, SK S7K 3J7'
    });
    var markerSkText = '<div class="cc-map-text">'+
        '<h3>Q-Line Trucking</h3>'+
        '<h4>Saskatoon, Saskatchewan</h4>'+
        '<p>PO Box 110-B RR#4, Corman Industrial Park Saskatoon, SK S7K 3J7</p>'+
    '</div>';
    markerSk.addListener('click', function() {
      new google.maps.InfoWindow({
        content: markerSkText,
      }).open(map, this);
    });



    var markerMb = new google.maps.Marker({
     position: {lat: 49.177328, lng: -97.936206},
     map: map,
     title: 'PO Box 1870 #6 3rd St S, Winkler, MB R6W 4B7'
    });
    var markerMbText = '<div class="cc-map-text">'+
        '<h3>Q-Line Trucking</h3>'+
        '<h4>Winkler, Manitoba</h4>'+
        '<p>PO Box 1870 #6 3rd St S, Winkler, MB R6W 4B7</p>'+
    '</div>';
    markerMb.addListener('click', function() {
      new google.maps.InfoWindow({
        content: markerMbText,
      }).open(map, this);
    });


    var markerIa = new google.maps.Marker({
     position: {lat: 42.464988, lng: -92.339417},
     map: map,
     title: '1410 Columbus Dr, Waterloo, IA 50702'
    });
    var markerIaText = '<div class="cc-map-text">'+
        '<h3>Q-Line Trucking</h3>'+
        '<h4>Waterloo, Iowa</h4>'+
        '<p>1410 Columbus Dr, Waterloo, IA 50702</p>'+
    '</div>';
    markerIa.addListener('click', function() {
      new google.maps.InfoWindow({
        content: markerIaText,
      }).open(map, this);
    });



    var markerOn = new google.maps.Marker({
     position: {lat: 43.576325, lng: -79.812785},
     map: map,
     title: '7105 Auburn Road, Milton, ON L9T7V9'
    });
  var markerOnText = '<div class="cc-map-text">'+
        '<h3>Q-Line Trucking</h3>'+
        '<h4>Milton, Ontario</h4>'+
        '<p>7105 Auburn Road, Milton, ON L9T7V9</p>'+
    '</div>';
    markerOn.addListener('click', function() {
      new google.maps.InfoWindow({
        content: markerOnText,
      }).open(map, this);
    });


  }

Answer 1

您应该做的是为创建标记所需的所有数据创建一个数组。循环那个。类似于：

var markerData = [
    {
        lat: 49.054201,
        lng: -122.383454,
        title: '30310-30360 Old Yale Rd, Abbotsford, BC V4X 2N7',
        text: '<h3>Q-Line Trucking</h3>'+'<h4>Abbotsford, British Columbia</h4>'+'<p>30310-30360 Old Yale Rd, Abbotsford, BC V4X 2N7</p>'
    },
    {
        lat: 53.540016,
        lng: -113.797466,
        title: '#625-26409 TWP Road 525A, Acheson, AB T7X 5A6',
        text: '<h3>Q-Line Trucking</h3>' + '<h4>Acheson, Alberta</h4>'+'<p>#625-26409 TWP Road 525A, Acheson, AB T7X 5A6</p>'
    },
    // ... etc
];


for (var i = 0; i < markerData.length; i++) {
    createMarker(markerData[i]);    
}

function createMarker(data) {
    var marker = new google.maps.Marker({
     position: {lat: data.lat, lng: data.lng},
     map: map,
     title: data.title
    });
    var markerText = '<div class="cc-map-text">' + data.text + '</div>';
    marker.addListener('click', function() {
      new google.maps.InfoWindow({
        content: markerText,
      }).open(map, this);
    });
}

您甚至可以将 text 进一步分解为 <h3>、<h4> 和 <p> 所需的每个部分，如果这样的话。

需要帮助保持我的 Google 地图 API JS 代码干燥

Need help keeping my Google Map API JS code DRY

javascript

google-maps

dry

google-maps-api-3

google-maps-markers