单击信息窗口内的按钮时更改谷歌地图标记图标

Question

我从 JSON 导入的地图上有多个标记。在标记信息窗口内，我有一个按钮，单击该按钮时，我想更改标记图像。请在下面检查我的代码。标记列表和信息窗口工作正常。我只想对信息窗口内的按钮执行一些操作。

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);
}

Answer 1

在您可以使用 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
  });
});

相关问题：How to detect button click in googlemaps infowindow

如果要改变marker的图标，需要在marker上调用.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);
      });
    });
  });

proof of concept fiddle

代码 sn-p：

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>