单击信息窗口中的按钮时更改Google地图标记图标

问题描述

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

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

相关问题：How to detect button click in 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,function() {
      $("#shortList").click(function() {
        image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
        that.setIcon(image);
      });
    });
  });

proof of concept fiddle

代码段：

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,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',marker)
    var that = this;
    google.maps.event.addListener(infowindow,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>