[英]Change google map marker icon when clicking button inside infowindow
我从 JSON 导入的 map 上有多个标记。 在标记信息窗口内,我有一个按钮,单击该按钮时,我想更改标记图像。 请在下面检查我的代码。 标记列表和信息窗口工作正常。 我只想对信息窗口内的按钮执行一些操作。
var workerlist;
var jobprice;
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
function myMap() {
var mapProp= {
center:new google.maps.LatLng(30.7333,76.7794),
zoom:10,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"),mapProp);
image = 'images/blue_marker1.png';
image1 = 'images/pink_marker1.png';
console.log(workerlist);
for (var i = 0; i < workerlist.length; i++) {
list = workerlist[i];
price = jobprice;
position = new google.maps.LatLng(list.latitude,list.longitude);
addMarker(map,list,price,position,marker);
}
}
function addMarker(map,list,price,position,marker){
marker = new google.maps.Marker({
position: position,
title: list.name,
map: map,
icon: image
});
var contentString = '<div class="mapBox">'+
'<div class="content"> <h3>'+ list.name +
'</h3>'+
'<h6>(2.1 miles from the job venue)</h6>' +
'<div class="rating"></div>'+
'<p>Total cost to hire:</p>'+
'<p>Rate: $' + price.Price + ' per hour</p>'+
'<p>Total Cost: $'+ price.total_amount +'</p>'+
'</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>'+
'</div>';
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map,marker)
$("#shortList").click(function(){
image = 'images/pink_marker1.png';
});
});
}
function shortList(){
// alert('clicked');
// infowindow.close();
//marker.setIcon(image1);
}
在您可以使用 JQuery 访问 DOM 中的<button id="shortList">
之前,需要将其添加到 DOM 中。 这在渲染InfoWindow
内容时异步发生, InfoWindow
上的domready
事件在可用时触发。
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
// code here to change the icon
});
});
相关问题: 如何检测 googlemaps infowindow 中的按钮点击
如果要更改标记的图标,则需要在标记上调用.setIcon
:
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map, marker)
var that = this; // save reference to marker to change its icon
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
that.setIcon(image);
});
});
});
代码片段:
var workerlist; var jobprice = { Price: "$10", total_amount: "$100" }; var price; var map; var list; var position; var image; var image1; var marker; workerlist = [{ name: "Chandigarth", latitude: 30.7333, longitude: 76.7794 }, { name: "Chandigarth2", latitude: 30.7, longitude: 76.7 } ] function myMap() { var mapProp = { center: new google.maps.LatLng(30.7333, 76.7794), zoom: 10, disableDefaultUI: true }; map = new google.maps.Map(document.getElementById("map"), mapProp); image = 'http://maps.google.com/mapfiles/ms/micons/blue.png'; image1 = 'http://maps.google.com/mapfiles/ms/micons/orange.png'; console.log(workerlist); for (var i = 0; i < workerlist.length; i++) { list = workerlist[i]; price = jobprice; position = new google.maps.LatLng(list.latitude, list.longitude); addMarker(map, list, price, position, marker); } } function addMarker(map, list, price, position, marker) { marker = new google.maps.Marker({ position: position, title: list.name, map: map, icon: image }); var contentString = '<div class="mapBox">' + '<div class="content"> <h3>' + list.name + '</h3>' + '<h6>(2.1 miles from the job venue)</h6>' + '<div class="rating"></div>' + '<p>Total cost to hire:</p>' + '<p>Rate: $' + price.Price + ' per hour</p>' + '<p>Total Cost: $' + price.total_amount + '</p>' + '</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>' + '</div>'; marker.addListener('click', function() { if (typeof infowindow.= 'undefined') infowindow;close(). infowindow = new google.maps:InfoWindow({ content, contentString. }) infowindow,open(map; marker) var that = this. google.maps.event,addListener(infowindow, 'domready'. function() { $("#shortList"):click(function() { image = 'http.//maps.google.com/mapfiles/ms/micons/orange;png'. that;setIcon(image); }); }); }); } function shortList() { // alert('clicked'). // infowindow;close(). //marker;setIcon(image1); }
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:DOCTYPE html> <html> <head> <title>Info Windows</title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=myMap&libraries=&v=weekly" defer></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.