更改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>