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

Question

我可以很容易地阅读和理解Javascript，但我很难尝试编写自己的代码。因此，我遇到了一些用于Google Map API的代码，我修补了这些代码以达到我的目的，但是重复太多了。

我特别谈论的是我必须将 .addListener 分别放在每个标记的部分(在代码块的末尾)。我认为数组可以帮助清理问题，但我仍然不知道它是如何工作的。任何帮助都非常感谢！

<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>，如果这有意义的话。