单击信息窗口中的按钮时更改Google地图标记图标 [英] Change google map marker icon when clicking button inside infowindow

查看：56
本文介绍了单击信息窗口中的按钮时更改Google地图标记图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  var workerlist;var jobprice;var price;var map;var list;var position;var image;var image1;var标记；函数myMap(){var mapProp = {中心:新的google.maps.LatLng(30.7333,76.7794)，变焦: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];价格=工作价格；位置=新的google.maps.LatLng(list.latitude，list.longitude);addMarker(地图，列表，价格，位置，标记);}}函数addMarker(地图，列表，价格，位置，标记){marker = new google.maps.Marker({位置:位置，标题:list.name，地图:图标:图片});var contentString ='< div class =" mapBox">'+'< div class =内容">< h3>'+ list.name +'</h3>'+< h6>(距工作地点2.1英里)</h6>"+'< div class =评级">//div''+'< p>总租金:</p>'+'< p& Rate:$'+价格.价格+'每小时</p>'+'< p>总费用:$'+ price.total_amount +'</p>'+'</div><按钮id ="shortList"class ="btn btn-shortlist"；onclick =" shortList()">作业的简短列表/button>'+'</div>';marker.addListener('click'，function(){如果(typeof infowindow！='undefined')infowindow.close();infowindow =新的google.maps.InfoWindow({内容:contentString，})infowindow.open(地图，标记)$(#shortList").click(function(){image ='images/pink_marker1.png';});});}函数shortList(){//alert('clicked');//infowindow.close();//marker.setIcon(image1);}

解决方案

在使用JQuery访问DOM中的< button id ="shortList"> 之前，必须先已添加到DOM.呈现 InfoWindow 内容时，异步发生这种情况，而

代码段: 

  var workerlist;var jobprice = {价格:"$ 10"，total_amount:"$ 100"};var price;var map;var list;var position;var image;var image1;var标记；workerlist = [{名称:"Chandigarth"，纬度:30.7333，经度:76.7794}，{名称:"Chandigarth2"，纬度:30.7，经度:76.7}]函数myMap(){var mapProp = {中心:新的google.maps.LatLng(30.7333，76.7794)，变焦:10，disableDefaultUI:true};map = new google.maps.Map(document.getElementById("map")，mapProp);图片='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];价格=工作价格；position = new google.maps.LatLng(list.latitude，list.longitude);addMarker(地图，清单，价格，位置，标记);}}函数addMarker(地图，清单，价格，位置，标记){marker = new google.maps.Marker({位置:位置，标题:list.name，地图:图标:图片});var contentString ='< div class ="mapBox">'+'< div class ="content">< h3>'+ list.name +'</h3>'+< h6>(距工作地点2.1英里)</h6>"+'< div class ="rating"></div>'+'< p>总租用费用:</p>'+'< p&费率:$'+价格.价格+'每小时</p>'+'< p>总费用:$'+ price.total_amount +'</p>'+'</div><按钮id ="shortList" class ="btn btn-shortlist" onclick ="shortList()">作业的简短列表</button>'+'</div>';marker.addListener('click'，function(){如果(typeof infowindow！='undefined')infowindow.close();infowindow =新的google.maps.InfoWindow({内容:contentString，})infowindow.open(地图，标记)var that = this;google.maps.event.addListener(infowindow，'domready'，function(){$(#shortList").click(function(){图片='http://maps.google.com/mapfiles/ms/micons/orange.png';that.setIcon(image);});});});}函数shortList(){//alert('clicked');//infowindow.close();//marker.setIcon(image1);}  

 /*始终明确设置地图高度以定义div的大小*包含地图的元素.*/#地图 {高度:100％;}/*可选:使示例页面填充窗口.*/html，身体 {高度:100％;边距:0;填充:0;}  

 < script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script><！DOCTYPE html>< html>< head>< title>信息窗口</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=每周推迟">></<！-jsFiddle将插入css和js-></head><身体>< div id ="map"></div></body></html>

I have multiple markers on the map that I have imported from JSON. Inside the marker infowindow I have a button and when clicking on that, I want to change the marker image. Please check my code below. Marker list and Infowindow is working fine. I just want to do some actions on the button that is inside 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,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);
}

解决方案

Before you can access the <button id="shortList"> in the DOM with JQuery, it needs to be added to the DOM. That happens asynchronously when the InfoWindow content is rendered, the domready event on the InfoWindow fires when it is available.

google.maps.event.addListener(infowindow, 'domready', function() {
  $("#shortList").click(function() {
    // code here to change the icon
  });
});

related question: How to detect button click in googlemaps infowindow

If you want the icon of the marker to change, you need to call .setIcon on the marker:

  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

code snippet:

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>

这篇关于单击信息窗口中的按钮时更改Google地图标记图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆