有沒有辦法用字母標記我的地圖標記？

Question

function initialize() { 
var map; 
var bounds = new google.maps.LatLngBounds(); 
var mapOptions = { 
    mapTypeId: 'roadmap' 
}; 

// Display a map on the page 
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
map.setTilt(45); 

// Multiple Markers 

var markers = [ 
    ['Joe Brown Park, New Orleans',    30.030342, -89.966561], 
    ['City Park, New Orleans',     29.993514, -90.098118] 
]; 

// Info Window Content 
var infoWindowContent = [ 

    [ 
    '<h3>Joe Brown Park</h3>' + 
    '<h3>Named after 1 of the states largest independent oil producers, this park offers year-round events.</h3>' + 
    '</div>'], 
    [ 
    '<h3>City Park </h3>' + 
    '<h3>A 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States.</h3>' + 
    '</div>'], 
]; 

// Display multiple markers on a map 
var infoWindow = new google.maps.InfoWindow(), marker, i; 

// Loop through our array of markers & place each one on the map 
for(i = 0; i < markers.length; i++) { 
    var position = new google.maps.LatLng(
     markers[i][1], 
     markers[i][2], 
     markers[i][3]); 
    bounds.extend(position); 
    marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: markers[i][0] 
    }); 

    // Allow each marker to have an info window  
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infoWindow.setContent(infoWindowContent[i][0]); 
      infoWindow.open(map, marker); 
     } 
    })(marker, i)); 

} 

我可以直接在我的工作地圖上添加一個Icon變量，或者我需要更改大部分代碼以將字母添加到我的標記中嗎？在此先感謝

Answer 1

可以在標記陣列添加另一列：

var markers = [ 
    ['Joe Brown Park, New Orleans',    30.030342, -89.966561,'','PATHTOICON/icon1.png'], 
    ['City Park, New Orleans',     29.993514, -90.098118,'','PATHTOICON/icon2.jpg'] 
]; 

，然後在該被添加標記只是添加圖標的循環：和指向圖標列在陣列中

for(i = 0; i < markers.length; i++) { 
    var position = new google.maps.LatLng(
     markers[i][1], 
     markers[i][2], 
     markers[i][3]); 
    bounds.extend(position); 
    marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: markers[i][0], 
     icon: markers[i][4]// <=== each marker can have its own icon 
    }); 

Answer 2

Google Maps JavaScript API v3支持single character labels on markers，這會爲您的標記添加數組中標記的數字（從零開始）。

marker = new google.maps.Marker({ 
    position: position, 
    map: map, 
    title: markers[i][0], 
    label: ""+i 
}); 

如果你希望它是一個字母，您可以信添加到陣列作爲第四元素或數組索引轉換成一個字母：

var label = String.fromCharCode(65+i); 
marker = new google.maps.Marker({ 
    position: position, 
    map: map, 
    title: markers[i][0], 
    label: label 
}); 

proof of concept fiddle

code code snippet：

function initialize() { 
 
    var map; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var mapOptions = { 
 
    mapTypeId: 'roadmap' 
 
    }; 
 

 
    // Display a map on the page 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
 
    map.setTilt(45); 
 

 
    // Multiple Markers 
 
    var markers = [ 
 
    ['Joe Brown Park, New Orleans', 30.030342, -89.966561], 
 
    ['City Park, New Orleans', 29.993514, -90.098118] 
 
    ]; 
 

 
    // Info Window Content 
 
    var infoWindowContent = [ 
 
    [ 
 
     '<h3>Joe Brown Park</h3>' + 
 
     'Named after 1 of the states largest independent oil producers, this park offers year-round events.' + 
 
     '</div>' 
 
    ], 
 
    [ 
 
     '<h3>City Park </h3>' + 
 
     'A 1,300 acre public park in New Orleans, Louisiana, is the 87th largest and 7th-most-visited urban public park in the United States.' + 
 
     '</div>' 
 
    ], 
 
    ]; 
 

 
    // Display multiple markers on a map 
 
    var infoWindow = new google.maps.InfoWindow(), marker, i; 
 
    // Loop through our array of markers & place each one on the map 
 
    for (i = 0; i < markers.length; i++) { 
 
    var position = new google.maps.LatLng(
 
     markers[i][1], 
 
     markers[i][2]); 
 
    bounds.extend(position); 
 
    var label = String.fromCharCode(65 + i); 
 
    marker = new google.maps.Marker({ 
 
     position: position, 
 
     map: map, 
 
     title: markers[i][0], 
 
     label: label 
 
    }); 
 

 
    // Allow each marker to have an info window  
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infoWindow.setContent(infoWindowContent[i][0]); 
 
     infoWindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>