谷歌地圖中的編號/單獨標記

我正在爲即將到來的節日創建場地列表，並希望每個標籤都貼上單獨的標記圖像。儘管我已經掌握了地圖的所有其他方面，但似乎無法將各個標記圖像分配到場館陣列中。谷歌地圖中的編號/單獨標記

這是我有：

function initialize() { 
var styles = [ 
{ 
    "featureType": "poi", 
    "elementType": "geometry", 
    "stylers": [ { "visibility": "on" }, { "color": "#f5f5f5" } ] }, 

    { "featureType": "landscape.natural", 
    "stylers": [ { "visibility": "on" }, { "invert_lightness": true }, { "color": "#dadad9" } ] }, 

    { "featureType": "landscape.man_made", 
    "stylers": [ { "visibility": "off" }, { "color": "#ebebeb" } ] }, 

    { "featureType": "road.arterial", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] }, 

    { "featureType": "road.arterial", "elementType": "labels.text", 
    "stylers": [ { "saturation": -100 }, { "gamma": 3.31 }, { "weight": 0.1 } ] }, 

    { "featureType": "road.arterial", "elementType": "labels.stroke", 
    "stylers": [ { "visibility": "off" } ] }, 



    { "featureType": "road.highway", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] }, 

    { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "simplified" } ] }, 

    { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, 


    { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" } ] }, 

    { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, 



    { "featureType": "road.local", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] }, 

    { "featureType": "road.local", "elementType": "labels", "stylers": [ { "visibility": "simplified" } ] }, 

    { "featureType": "road.local", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, 

    { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" } ] }, 



    { "featureType": "water", 
    "stylers": [ { "color": "#646464" } ] }, 

    { "featureType": "poi.business", 
    "stylers": [ { "visibility": "on" } ] }, 

    { "featureType": "transit.line", "elementType": "labels.text", 
    "stylers": [ { "color": "#eeccff" }, { "visibility": "simplified" } ] }, 

    { "featureType": "transit.line", "elementType": "geometry.fill", 
    "stylers": [ { "visibility": "on" }, { "color": "#ff8080" } ] }, 

    { 
"featureType": "poi", 
"stylers": [ 
    { "visibility": "off" } 
] 
}, 

{ 
"featureType": "administrative", 
"stylers": [ 
    { "visibility": "off" } 
] 
}, 

{ 
"featureType": "administrative", 
"elementType": "labels.text.fill", 
"stylers": [ 
    { "visibility": "on" }, 
    { "color": "#e6e6e6" } 
] 
} 
] 


// STYLE 
var styledMap = new google.maps.StyledMapType(styles, 
{name: "Styled Map"}); 


var homePoint = new google.maps.LatLng(53.34729785,-6.25924587), 
    markers, 
     myMapOptions = { 
     zoom: 15, 
     center: homePoint, 
     disableDefaultUI: false, 
     zoomControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }, 
    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions); 

    // var image = 'marker.png'; 
    // var myLatLng = new google.maps.LatLng(53.34457415, -6.26930952); 
    // var Marker = new google.maps.Marker({ 
    // position: myLatLng, 
    // map: map, 
    // icon: image 
    // }); 

    // var image = 'theatre_04.png'; 
    // var theLatLng = new google.maps.LatLng(52.34457415, -6.26930952); 
    // var Marker = new google.maps.Marker({ 
    // position: theLatLng, 
    // map: map, 
    // title: 'Click to zoom', 
    // icon: image, 
    // address: "Abbey Theatre, 26 Lwr Abbey St, Dublin 1", 
    // tel: "+353 1 878 7222", 
    // link: "http://www.abbeytheatre.ie" 
    // }); 


// Marker style 1 

function initMarkers(map, markerData) { 
    var newMarkers = [], 
     marker; 

     var newMarker = new google.maps.MarkerImage('theatre_01.png', 
     new google.maps.Size(30,30), 
     new google.maps.Point(0,0) 
    ); 



     for(var i=0; i<markerData.length; i++) { 
     marker = new google.maps.Marker({ 
      map: map, 
      // icon: newMarker, 
      draggable: false, 
      position: markerData[i].latLng, 
      visible: true, 
      labelContent: i, 
      labelClass: "labels" 
     }), 


     boxText = document.createElement("div"), 
     //INFOBOX STYLE 
     infoboxOptions = { 
      content: boxText, 
      disableAutoPan: false, 
      maxWidth: 0, 
      pixelOffset: new google.maps.Size(0, 0), 
      zIndex: null, 
      boxStyle: { 
       opacity: 0.75, 
       width: "150px" 
      }, 
      closeBoxMargin: "5px", 
      closeBoxURL: "close.png", 
      infoBoxClearance: new google.maps.Size(1, 1), 
      isHidden: false, 
      pane: "floatPane", 
      enableEventPropagation: false 
     }; 



     // add a click listener to the marker 
     google.maps.event.addListener(marker, 'click', function() { 
     // reference clicked marker 
     var curMarker = this; 
     // loop through all markers 
     $.each(markers, function(index, marker) { 
     // if marker is not the clicked marker, close the marker 
     if(marker !== curMarker) {marker.infobox.close();} 
     }); 
    }); 


     newMarkers.push(marker); 

     //INFOBOX TEMPLATE 
     boxText.style.cssText = "background:#fff; color:#000; padding: 20px;"; 
     boxText.innerHTML = "<a target='_blank' href='" + markerData[i].link + "'>" + markerData[i].tel + "<br/>" + markerData[i].address + "</a>"; 
     newMarkers[i].infobox = new InfoBox(infoboxOptions); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       newMarkers[i].infobox.open(map, this); 
       map.panTo(markerData[i].latLng); 
      } 
     })(marker, i)); 
    } 

    return newMarkers; 
} 


    //MARKERS ARRAY 
    markers = initMarkers(map, [ 

    { latLng: new google.maps.LatLng(53.3485401, -6.257107), address: "Abbey Theatre, 26 Lwr Abbey St, Dublin 1", tel: "+353 1 878 7222", link: "http://www.abbeytheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3450158, -6.2650386), address: "The Ark, A Cultural Centre For Children, 11a Eustace St, Temple Bar, Dublin 2", tel: "+353 1 670 7788", link: "http://www.ark.ie" }, 

    { latLng: new google.maps.LatLng(53.39610586, -6.26289368), address: "axis:Ballymun, Dublin 9", tel: "+353 1 883 2100", link: "http://www.axis-ballymun.ie" }, 

    { latLng: new google.maps.LatLng(53.28856459, -6.3716197), address: "Civic Theatre, Tallaght, Dublin 24", tel: "+353 1 462 7477", link: "http://www.civictheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3453276, -6.2657425), address: "The Culture Box, 12 East Essex St, Temple Bar, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3525572, -6.2500383), address: "DanceHouse, 1 Foley St, Dublin 1" }, 

    { latLng: new google.maps.LatLng(53.3934229, -6.3858142), address: "Draíocht, The Blanchardstown Centre, Dublin 15", tel: "+353 1 885 2622", link: "http://www.draiocht.ie" }, 

    { latLng: new google.maps.LatLng(53.3432286, -6.2565383), address: "Edmund Burke Theatre Arts Building, Trinity College, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3449723, -6.2666144), address: "Festival Box Office, 44 East Essex St, Temple Bar, Dublin 2", tel: "+353 1 677 8899", link: "http://www.dublintheatrefestival.com" }, 

    { latLng: new google.maps.LatLng(53.3401925, -6.2611233), address: "Gaiety Theatre, 53/54 South King St, Dublin 2", tel: "0818 719 300", link: "http://www.gaietytheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3392288, -6.2463933), address: "Goethe-Institut, 37 Merrion Sq, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3435732, -6.2639487), address: "Odessa, 13 Dame Court, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3515299, -6.2532256), address: "Oonagh Young Gallery, 1 James Joyce St, Liberty Corner, Dublin 1" }, 

    { latLng: new google.maps.LatLng(53.3553559, -6.2621326), address: "OReilly Theatre, Belvedere 6 Great Denmark St, Dublin 1 "}, 

    { latLng: new google.maps.LatLng(53.2934538, -6.1348062), address: "Pavilion Theatre Marine Road, Dún Laoghaire, Co. Dublin", tel: "+353 1 231 2929", link: "http://www.paviliontheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3450204, -6.2662288), address: "Project Arts Centre, 39 East Essex St, Temple Bar, Dublin 2", tel: "+353 1 881 9613", link: "http://www.projectartscentre.ie" }, 

    { latLng: new google.maps.LatLng(53.34492803, -6.25734687), address: "Samuel Beckett Theatre, Trinity College, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3449333, -6.2688625), address: "Smock Alley Theatre, 6/7 Exchange St Lwr, Dublin 8", tel: "+353 1 677 0014", link: "http://www.smockalley.com" }, 

    { latLng: new google.maps.LatLng(53.3455723, -6.2636546), address: "Temple Bar Gallery and Studios, 5 – 9 Temple Bar, Dublin 2"}, 


]); 


    //HOOK UP STYLES 
    map.mapTypes.set('map_style', styledMap); 
    map.setMapTypeId('map_style'); 

}

如果它更容易，你可以查看這裏的WIP：http://www.detail.ie/ftp/DTF/map/dtf_5.html

由於提前，

來源

2013-07-19 user2598989

您可以指定圖像對於通過將標記選項的icon屬性指定爲所需圖像的路徑來創建標記時，您可以這樣做：

marker = new google.maps.Marker({ 
    icon: "/images/icon.png" 
})

見https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

在你的情況，你應該能夠爲您要使用的圖像添加到您的標記陣列，是這樣的：

markers = initMarkers(map, [ 
    { icon:"/images/icon.png", latLng: new google.maps.LatLng(53.3525572, -6.2500383), 
    ...

然後，當你創建您的標記，只需讀取其圖標屬性，如下所示：

marker = new google.maps.Marker({ 
    icon: markerData[i].icon, 
    ...

來源

2013-07-19 10:28:33 Splendiferous

輝煌，謝謝你的好意！ – user2598989

working example (letters A-...)

function initialize() { 
var styles = [ 
{ 
    "featureType": "poi", 
    "elementType": "geometry", 
    "stylers": [ { "visibility": "on" }, { "color": "#f5f5f5" } ] }, 

    { "featureType": "landscape.natural", 
    "stylers": [ { "visibility": "on" }, { "invert_lightness": true }, { "color": "#dadad9" } ] }, 

    { "featureType": "landscape.man_made", 
    "stylers": [ { "visibility": "off" }, { "color": "#ebebeb" } ] }, 

    { "featureType": "road.arterial", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] }, 

    { "featureType": "road.arterial", "elementType": "labels.text", 
    "stylers": [ { "saturation": -100 }, { "gamma": 3.31 }, { "weight": 0.1 } ] }, 

    { "featureType": "road.arterial", "elementType": "labels.stroke", 
    "stylers": [ { "visibility": "off" } ] }, 



    { "featureType": "road.highway", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] }, 

    { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "simplified" } ] }, 

    { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, 


    { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" } ] }, 

    { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, 



    { "featureType": "road.local", "elementType": "geometry", 
    "stylers": [ { "visibility": "simplified" }, { "color": "#ffffff" } ] }, 

    { "featureType": "road.local", "elementType": "labels", "stylers": [ { "visibility": "simplified" } ] }, 

    { "featureType": "road.local", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, 

    { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" } ] }, 



    { "featureType": "water", 
    "stylers": [ { "color": "#646464" } ] }, 

    { "featureType": "poi.business", 
    "stylers": [ { "visibility": "on" } ] }, 

    { "featureType": "transit.line", "elementType": "labels.text", 
    "stylers": [ { "color": "#eeccff" }, { "visibility": "simplified" } ] }, 

    { "featureType": "transit.line", "elementType": "geometry.fill", 
    "stylers": [ { "visibility": "on" }, { "color": "#ff8080" } ] }, 

    { 
"featureType": "poi", 
"stylers": [ 
    { "visibility": "off" } 
] 
}, 

{ 
"featureType": "administrative", 
"stylers": [ 
    { "visibility": "off" } 
] 
}, 

{ 
"featureType": "administrative", 
"elementType": "labels.text.fill", 
"stylers": [ 
    { "visibility": "on" }, 
    { "color": "#e6e6e6" } 
] 
} 
] 


// STYLE 
var styledMap = new google.maps.StyledMapType(styles, 
{name: "Styled Map"}); 


var homePoint = new google.maps.LatLng(53.34729785,-6.25924587), 
    markers, 
     myMapOptions = { 
     zoom: 15, 
     center: homePoint, 
     disableDefaultUI: false, 
     zoomControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }, 
    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions); 

// Marker style 1 
var icons = new Array(); 
icons["red"] = { 
     url:"mapIcons/marker_red.png", 
     // This marker is 20 pixels wide by 34 pixels tall. 
     size: new google.maps.Size(20, 34), 
     // The origin for this image is 0,0. 
     origin: new google.maps.Point(0,0), 
     // The anchor for this image is at 9,34. 
     anchor: new google.maps.Point(9, 34) 
     }; 

function getMarkerImage(iconStr) { 
    if ((typeof(iconStr)=="undefined") || (iconStr==null)) { 
     iconStr = "red"; 
    } 
    if (!icons[iconStr]) { 
     icons[iconStr] = { 
     url: "http://www.google.com/mapfiles/marker"+ iconStr +".png", 
     // This marker is 20 pixels wide by 34 pixels tall. 
     size: new google.maps.Size(20, 34), 
     // The origin for this image is 0,0. 
     origin: new google.maps.Point(0,0), 
     // The anchor for this image is at 6,20. 
     anchor: new google.maps.Point(9, 34) 
     }; 
    } 
    return icons[iconStr]; 

} 
    // Marker sizes are expressed as a Size of X,Y 
    // where the origin of the image (0,0) is located 
    // in the top left of the image. 

    // Origins, anchor positions and coordinates of the marker 
    // increase in the X direction to the right and in 
    // the Y direction down. 

    var iconImage = { 
     url: 'mapIcons/marker_red.png', 
     // This marker is 20 pixels wide by 34 pixels tall. 
     size: new google.maps.Size(20, 34), 
     // The origin for this image is 0,0. 
     origin: new google.maps.Point(0,0), 
     // The anchor for this image is at 9,34. 
     anchor: new google.maps.Point(9, 34) 
     }; 
    var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png', 
     // The shadow image is larger in the horizontal dimension 
     // while the position and offset are the same as for the main image. 
     new google.maps.Size(37, 34), 
     new google.maps.Point(0,0), 
     new google.maps.Point(9, 34)); 
     // Shapes define the clickable region of the icon. 
     // The type defines an HTML &lt;area&gt; element 'poly' which 
     // traces out a polygon as a series of X,Y points. The final 
     // coordinate closes the poly by connecting to the first 
     // coordinate. 
    var iconShape = { 
     coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0], 
     type: 'poly' 
    }; 

function initMarkers(map, markerData) { 
    var newMarkers = [], 
     marker; 

     for(var i=0; i<markerData.length; i++) { 
     marker = new google.maps.Marker({ 
      map: map, 
      icon: getMarkerImage(String.fromCharCode(i+57)), 
      draggable: false, 
      position: markerData[i].latLng, 
      visible: true, 
      labelContent: i, 
      labelClass: "labels" 
     }), 

     boxText = document.createElement("div"), 
     //INFOBOX STYLE 
     infoboxOptions = { 
      content: boxText, 
      disableAutoPan: false, 
      maxWidth: 0, 
      pixelOffset: new google.maps.Size(0, 0), 
      zIndex: null, 
      boxStyle: { 
       opacity: 0.75, 
       width: "150px" 
      }, 
      closeBoxMargin: "5px", 
      closeBoxURL: "close.png", 
      infoBoxClearance: new google.maps.Size(1, 1), 
      isHidden: false, 
      pane: "floatPane", 
      enableEventPropagation: false 
     }; 

     // add a click listener to the marker 
     google.maps.event.addListener(marker, 'click', function() { 
     // reference clicked marker 
     var curMarker = this; 
     // loop through all markers 
     $.each(markers, function(index, marker) { 
     // if marker is not the clicked marker, close the marker 
     if(marker !== curMarker) {marker.infobox.close();} 
     }); 
    }); 

     newMarkers.push(marker); 

     //INFOBOX TEMPLATE 
     boxText.style.cssText = "background:#fff; color:#000; padding: 20px;"; 
     boxText.innerHTML = "<a target='_blank' href='" + markerData[i].link + "'>" + markerData[i].tel + "<br/>" + markerData[i].address + "</a>"; 
     newMarkers[i].infobox = new InfoBox(infoboxOptions); 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       newMarkers[i].infobox.open(map, this); 
       map.panTo(markerData[i].latLng); 
      } 
     })(marker, i)); 
    } 

    return newMarkers; 
} 


    //MARKERS ARRAY 
    markers = initMarkers(map, [ 

    { latLng: new google.maps.LatLng(53.3485401, -6.257107), address: "Abbey Theatre, 26 Lwr Abbey St, Dublin 1", tel: "+353 1 878 7222", link: "http://www.abbeytheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3450158, -6.2650386), address: "The Ark, A Cultural Centre For Children, 11a Eustace St, Temple Bar, Dublin 2", tel: "+353 1 670 7788", link: "http://www.ark.ie" }, 

    { latLng: new google.maps.LatLng(53.39610586, -6.26289368), address: "axis:Ballymun, Dublin 9", tel: "+353 1 883 2100", link: "http://www.axis-ballymun.ie" }, 

    { latLng: new google.maps.LatLng(53.28856459, -6.3716197), address: "Civic Theatre, Tallaght, Dublin 24", tel: "+353 1 462 7477", link: "http://www.civictheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3453276, -6.2657425), address: "The Culture Box, 12 East Essex St, Temple Bar, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3525572, -6.2500383), address: "DanceHouse, 1 Foley St, Dublin 1" }, 

    { latLng: new google.maps.LatLng(53.3934229, -6.3858142), address: "Draíocht, The Blanchardstown Centre, Dublin 15", tel: "+353 1 885 2622", link: "http://www.draiocht.ie" }, 

    { latLng: new google.maps.LatLng(53.3432286, -6.2565383), address: "Edmund Burke Theatre Arts Building, Trinity College, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3449723, -6.2666144), address: "Festival Box Office, 44 East Essex St, Temple Bar, Dublin 2", tel: "+353 1 677 8899", link: "http://www.dublintheatrefestival.com" }, 

    { latLng: new google.maps.LatLng(53.3401925, -6.2611233), address: "Gaiety Theatre, 53/54 South King St, Dublin 2", tel: "0818 719 300", link: "http://www.gaietytheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3392288, -6.2463933), address: "Goethe-Institut, 37 Merrion Sq, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3435732, -6.2639487), address: "Odessa, 13 Dame Court, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3515299, -6.2532256), address: "Oonagh Young Gallery, 1 James Joyce St, Liberty Corner, Dublin 1" }, 

    { latLng: new google.maps.LatLng(53.3553559, -6.2621326), address: "OReilly Theatre, Belvedere 6 Great Denmark St, Dublin 1 "}, 

    { latLng: new google.maps.LatLng(53.2934538, -6.1348062), address: "Pavilion Theatre Marine Road, Dún Laoghaire, Co. Dublin", tel: "+353 1 231 2929", link: "http://www.paviliontheatre.ie" }, 

    { latLng: new google.maps.LatLng(53.3450204, -6.2662288), address: "Project Arts Centre, 39 East Essex St, Temple Bar, Dublin 2", tel: "+353 1 881 9613", link: "http://www.projectartscentre.ie" }, 

    { latLng: new google.maps.LatLng(53.34492803, -6.25734687), address: "Samuel Beckett Theatre, Trinity College, Dublin 2" }, 

    { latLng: new google.maps.LatLng(53.3449333, -6.2688625), address: "Smock Alley Theatre, 6/7 Exchange St Lwr, Dublin 8", tel: "+353 1 677 0014", link: "http://www.smockalley.com" }, 

    { latLng: new google.maps.LatLng(53.3455723, -6.2636546), address: "Temple Bar Gallery and Studios, 5  9 Temple Bar, Dublin 2"}, 


]); 


    //HOOK UP STYLES 
    map.mapTypes.set('map_style', styledMap); 
    map.setMapTypeId('map_style'); 

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

來源

2013-07-19 16:50:56 geocodezip

谷歌地圖中的編號/單獨標記

回答

相關問題