更改google標記的icon_image

Question

我想更改特定場景中的標記圖像。當我們點擊地圖上有多個標記的標記時，點擊它會打開一個彈出窗口，彈出包含2-3個字段並提交按鈕。當我們點擊提交按鈕後，我想更改標記圖像。請讓我知道如何做到這一點。我已經從下面的鏈接嘗試，但它提交之前，我們提交彈出按鈕，它改變形象。

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0], locations[i][6]); 
     infowindow.open(map, marker); 
     marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); 
    } 
})(marker, i)); 

http://jsfiddle.net/gargiguy/s8vgxp3g/

Answer 1

到按鈕點擊後更改標記，添加按鈕的點擊運行的功能。將該函數傳遞給標記的引用並使用它來更改圖標。

一個選項：創建標記（即gmarkers）的陣列，推到該陣列的標記，然後用標記的數組索引來改變它的圖標：

window.submitFunction = function(i) { 
    gmarkers[i].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); 
} 

proof of concept fiddle

代碼片段：

var gmarkers = []; 
 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    // center: new google.maps.LatLng(-33.92, 151.25), 
 
    center: new google.maps.LatLng(36.8857, -76.2599), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/'; 
 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map, 
 
     icon: iconBase + 'Stock%20Index%20Up.png' 
 
    }); 
 
    gmarkers.push(marker); 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     console.log(locations[i][0] + "<br>" + locations[i][6] + "<br><input id='btn' value='submit' type='button' onclick='submitFunction(" + (gmarkers.length - 1) + ");/>"); 
 
     infowindow.setContent(locations[i][0] + "<br>" + locations[i][6] + "<br><input id='btn' value='submit' type='button' onclick='submitFunction(" + i + ");'/>"); 
 
     infowindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    } 
 
} 
 
window.submitFunction = function(i) { 
 
    gmarkers[i].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', initMap); 
 
var locations = [ 
 
    [ 
 
    "New Mermaid", 
 
    36.9079, -76.199, 
 
    1, 
 
    "Georgia Mason", 
 
    "", 
 
    "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.", 
 
    "coming soon" 
 
    ], 
 
    [ 
 
    "1950 Fish Dish", 
 
    36.87224, -76.29518, 
 
    2, 
 
    "Terry Cox-Joseph", 
 
    "Rowena's", 
 
    "758 W. 22nd Street in front of Rowena's", 
 
    "found" 
 
    ], 
 
    [ 
 
    "A Rising Community", 
 
    36.95298, -76.25158, 
 
    3, 
 
    "Steven F. Morris", 
 
    "Judy Boone Realty", 
 
    "Norfolk City Library - Pretlow Branch, 9640 Granby St.", 
 
    "found" 
 
    ], 
 
    [ 
 
    "A School Of Fish", 
 
    36.88909, -76.26055, 
 
    4, 
 
    "Steven F. Morris", 
 
    "Sandfiddler Pawn Shop", 
 
    "5429 Tidewater Dr.", 
 
    "found" 
 
    ], 
 
    [ 
 
    "Aubrica the Mermaid (nee: Aubry Alexis)", 
 
    36.8618, -76.203, 
 
    5, 
 
    "Myke Irving/ Georgia Mason", 
 
    "USAVE Auto Rental", 
 
    "Virginia Auto Rental on Virginia Beach Blvd", 
 
    "found" 
 
    ] 
 
];

<div> 
 
    <div id="map" style="width: 500px; height: 400px;"></div> 
 

 
    <script src="http://maps.google.com/maps/api/js"></script> 
 
</div>