在Google Map中單擊信息窗口時如何顯示顯示地址

Question

我正在使用Google Map API ，它工作正常，但是我想更改標記顏色，例如假設雄性表示黃色標記，雌性表示藍色標記。 怎么辦 如果您想知道性別詳細信息，請單擊標記，從這里彈出后，我將顯示性別詳細信息，例如他是男性還是女性

 var res = { "status": "success", "count": 3, "data": [{ "tripId": "1", "pickupLatitude": "12.956413", "pickupLongitude": "77.695380", "empName": "Arun", "gender":"Male", "pickupTime" : "9.30 AM" }, { "tripId": "1", "pickupLatitude": "12.956107", "pickupLongitude": "77.694994", "empName": "Kohila", "gender":"Female", "pickupTime" : "9.40 AM" }, { "tripId": "1", "pickupLatitude": "12.955639", "pickupLongitude": "77.694932", "empName": "Dinesh", "gender":"Male", "pickupTime" : "9.50 AM" } ], "travlledLocation": [ { "Travlinglatitude": "12.956664", "Travlinglongitude": "77.696829" }, { "Travlinglatitude": "12.956604", "Travlinglongitude": "77.696480" }, { "Travlinglatitude": "12.956523", "Travlinglongitude": "77.696021" }, { "Travlinglatitude": "12.956413", "Travlinglongitude": "77.695380" }, { "Travlinglatitude": "12.956335", "Travlinglongitude": "77.695029" }, { "Travlinglatitude": "12.956230", "Travlinglongitude": "77.694997" }, { "Travlinglatitude": "12.956107", "Travlinglongitude": "77.694994" }, { "Travlinglatitude": "12.955934", "Travlinglongitude": "77.694970" }, { "Travlinglatitude": "12.955639", "Travlinglongitude": "77.694932" }, { "Travlinglatitude": "12.955380", "Travlinglongitude": "77.694902" } ] }; var geocoder; var map; var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var locations = res.travlledLocation.map(function(o, i) { return [ i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'Going From Here' : i, o.Travlinglatitude, o.Travlinglongitude, i + 1 ] }); var waypoints = res.data.map(function(o) { return { empName: o.empName, pickupTime: o.pickupTime, gender: o.gender, lat: o.pickupLatitude, lng: o.pickupLongitude } }); initialize(); function initialize() { directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true }); var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, //center: new google.maps.LatLng(-33.92, 151.25), // mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); var infowindow = new google.maps.InfoWindow(); var marker, i; var request = { travelMode: google.maps.TravelMode.DRIVING }; for (i = 0; i < locations.length; i++) { if (locations[i][3] == 1 || locations[i][3] == locations.length) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, i: locations[i][0], icon: { url : locations[i][0]=='Start' ?'http://www.myiconfinder.com/uploads/iconsets/256-256-8055c322ae4049897caa15e5331940f2.png' : 'http://www.myiconfinder.com/uploads/iconsets/256-256-76f453c62108782f0cad9bfc2da1ae9d.png', scaledSize: locations[i][0]=='Start'? new google.maps.Size(40, 40) :new google.maps.Size(45, 45) } }); } google.maps.event.addListener(marker, 'click', (function(marker, infowindow) { return function() { infowindow.setContent(marker.i); infowindow.open(map, marker); }; })(marker, infowindow)); if (i == 0) request.origin = marker.getPosition(); else if (i == locations.length - 1) request.destination = marker.getPosition(); } //push the waypoints to request.waypoints array waypoints.forEach(function(v, i) { marker = new google.maps.Marker({ position: new google.maps.LatLng(v.lat, v.lng), map: map, icon: { url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png', scaledSize: new google.maps.Size(45, 45) }, data: v }); google.maps.event.addListener(marker, 'click', (function(marker, infowindow) { return function() { infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime+ '<br><b>Gender : </b>' + marker.data.gender); infowindow.open(map, marker); }; })(marker, infowindow)); }) directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); } google.maps.event.addDomListener(window, "load", initialize); 

  html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY"> </script> 

我的更新問題

從這里我單擊綠色圖標意味着顯示開始，然后單擊紅色圖標意味着顯示從這里出發，而不是我要顯示地址，請您更新您的答案–

Answer 1

在這里你有一個解決方案

 var res = { "status": "success", "count": 3, "data": [{ "tripId": "1", "pickupLatitude": "12.956413", "pickupLongitude": "77.695380", "empName": "Arun", "gender":"Male", "pickupTime" : "9.30 AM" }, { "tripId": "1", "pickupLatitude": "12.956107", "pickupLongitude": "77.694994", "empName": "Kohila", "gender":"Female", "pickupTime" : "9.40 AM" }, { "tripId": "1", "pickupLatitude": "12.955639", "pickupLongitude": "77.694932", "empName": "Dinesh", "gender":"Male", "pickupTime" : "9.50 AM" } ], "travlledLocation": [ { "Travlinglatitude": "12.956664", "Travlinglongitude": "77.696829" }, { "Travlinglatitude": "12.956604", "Travlinglongitude": "77.696480" }, { "Travlinglatitude": "12.956523", "Travlinglongitude": "77.696021" }, { "Travlinglatitude": "12.956413", "Travlinglongitude": "77.695380" }, { "Travlinglatitude": "12.956335", "Travlinglongitude": "77.695029" }, { "Travlinglatitude": "12.956230", "Travlinglongitude": "77.694997" }, { "Travlinglatitude": "12.956107", "Travlinglongitude": "77.694994" }, { "Travlinglatitude": "12.955934", "Travlinglongitude": "77.694970" }, { "Travlinglatitude": "12.955639", "Travlinglongitude": "77.694932" }, { "Travlinglatitude": "12.955380", "Travlinglongitude": "77.694902" } ] }; var geocoder = new google.maps.Geocoder(); var map; var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var locations = res.travlledLocation.map(function(o, i) { return [ ((i == 0) || (i == res.travlledLocation.length - 1)) ? {lat: o.Travlinglatitude, lng: o.Travlinglongitude} : i, o.Travlinglatitude, o.Travlinglongitude, i + 1 ] }); var waypoints = res.data.map(function(o) { return { empName: o.empName, pickupTime: o.pickupTime, gender: o.gender, lat: o.pickupLatitude, lng: o.pickupLongitude } }); initialize(); function initialize() { directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true }); var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, //center: new google.maps.LatLng(-33.92, 151.25), // mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); var infowindow = new google.maps.InfoWindow(); var marker, i; var request = { travelMode: google.maps.TravelMode.DRIVING }; for (i = 0; i < locations.length; i++) { if (locations[i][3] == 1 || locations[i][3] == locations.length) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, i: locations[i][0], icon: { url : locations[i][0]=='Start' ?'http://www.myiconfinder.com/uploads/iconsets/256-256-8055c322ae4049897caa15e5331940f2.png' : 'http://www.myiconfinder.com/uploads/iconsets/256-256-76f453c62108782f0cad9bfc2da1ae9d.png', scaledSize: locations[i][0]=='Start'? new google.maps.Size(40, 40) :new google.maps.Size(45, 45) } }); } google.maps.event.addListener(marker, 'click', (function(marker, infowindow) { geocoder.geocode({ 'latLng': new google.maps.LatLng(marker.i.lat, marker.i.lng) }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { infowindow.setContent(results[1].formatted_address); infowindow.open(map, marker); } else { alert('No results found'); } } else { //alert('Geocoder failed due to: ' + status); } }); })(marker, infowindow)); if (i == 0) request.origin = marker.getPosition(); else if (i == locations.length - 1) request.destination = marker.getPosition(); } //push the waypoints to request.waypoints array waypoints.forEach(function(v, i) { marker = new google.maps.Marker({ position: new google.maps.LatLng(v.lat, v.lng), map: map, icon: { url: v.gender == 'Male' ? 'http://www.clker.com/cliparts/0/V/t/A/W/N/google-maps-gris-hi.png' : 'http://www.clker.com/cliparts/n/Z/Y/K/e/e/yellow-google-map-pin-hi.png', scaledSize: new google.maps.Size(45, 45) }, data: v }); google.maps.event.addListener(marker, 'click', (function(marker, infowindow) { return function() { infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime+ '<br><b>Gender : </b>' + marker.data.gender); infowindow.open(map, marker); }; })(marker, infowindow)); }) directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); } google.maps.event.addDomListener(window, "load", initialize); 

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY"></script> <div id="map"></div> 

設置航點時，請檢查性別並在此處設置圖標。

希望這會幫助你。