我的要求是，需要显示特定位置（如州，市）的所有公交车站，并且应该只能标记公交车站并使用谷歌地图javascript api显示该公交车站的infoWindow。
下面是我的html代码，javascript标记逻辑也标记了地图上的所有位置我只需要标记公交车站
<!DOCTYPE html>
<html>
<head>
<title>Add/Remove Markers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 50%;
width:50%;
position:inherit !important;
margin-top:50px !important;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#map > div{
height:70% !important;
width:70% !important;
margin-top:50px !important;
}
a[href^="https://maps.google.com/maps"]{
display: none !important;
}
.gmnoprint a, .gmnoprint span, .gm-style-cc div {
display: none !important;
}
.gmnoprint div {
background: none !important;
}
</style>
</head>
<body>
<div id="floating-panel">
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
</div>
<div id="map"></div>
<p>Click on the map to add markers.</p>
<script>
// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var markers = [];
function initMap() {
var haightAshbury = {lat: 37.769, lng: -122.446};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: haightAshbury,
disableDefaultUI: true
});
// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function (event) {
addMarker(event.latLng);
});
// Adds a marker at the center of the map.
addMarker(haightAshbury);
}
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
//This code is to remove the marker from the map and the array
marker.addListener('click', function (e) {
var latIndex = markers.findIndex(x=>x.position.lat() == e.latLng.lat());
var lngIndex = markers.findIndex(x=>x.position.lng() == e.latLng.lng());
if ((latIndex != -1 && lngIndex != -1) && (latIndex == lngIndex)) {
markers[latIndex].setMap(null); // To remove the marker from the Map
markers.splice(latIndex, 1); // to remove the marker from the list of array
}
});
marker.addListener('mouseover', function (e) {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
marker.addListener('mouseout', function (e) {
infowindow.close();
});
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}
// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap">
</script>
</body>
</html>
答案 0 :(得分：0)
var map;
var infowindow;
var service;
var markers = [];
var availableMarkers = [];
var unAvailableMarkers = [];
var selectedMarkers = [];
var globalResults = [];
function initialize(lat,lng)
{
var origin = new google.maps.LatLng(lat,lng);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: origin,
zoom: 15,
disableDefaultUI: true
});
var request = {
location: origin,
radius: 2500,
types: ['bus_station']
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
map.addListener('click', function (event) {
initialize(event.latLng.lat(), event.latLng.lng())
});
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
globalResults = results;
for (var i = 0; i < results.length; i++) {
if (i < 11)
createMarker(results[i], 'green');
else
createMarker(results[i], 'red');
}
}
}
function createMarker(place,color) {
var placeLoc = place.geometry.location;
var icon;
if (color == 'green')
icon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
else if (color == 'red')
icon = 'http://maps.google.com/mapfiles/ms/icons/red-dot.png';
else
icon = 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png';
resizeIcon = icon;
var marker = null;
if (color == 'green') {
marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: resizeIcon
});
availableMarkers.push(marker);
}
else if (color == 'red') {
marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: resizeIcon
});
unAvailableMarkers.push(marker);
}
else {
marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: resizeIcon
});
selectedMarkers.push(marker);
}
markers.push(marker);
var content = '<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id;
var more_content = '<img src="../Content/Images/1475150806_map-marker.png"/>'; // this is to show the image r any additional content
//make a request for further details
service.getDetails({ reference: place.reference }, function (place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
more_content = '<hr/><strong><a href="' + place.url + '" target="details">Details</a>';
if (place.website) {
more_content += '<br/><br/><strong><a href="' + place.website + '" target="details">' + place.website + '</a>';
}
}
});
google.maps.event.addListener(marker, 'mouseover', function () {
//infowindow.setContent(content + more_content);
infowindow.setContent(content);
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
//google.maps.event.addListener(marker, 'mouseout', function (e) {
// infowindow.close();
//});
google.maps.event.addListener(marker, 'click', function (e) {
var latIndex = markers.findIndex(x=>x.position.lat() == e.latLng.lat());
var lngIndex = markers.findIndex(x=>x.position.lng() == e.latLng.lng());
var isAvailLat = availableMarkers.findIndex(x=>x.position.lat() == e.latLng.lat());
var isAvailLng = availableMarkers.findIndex(x=>x.position.lng() == e.latLng.lng());
var isUnAvailLat = unAvailableMarkers.findIndex(x=>x.position.lat() == e.latLng.lat());
var isUnAvailLng = unAvailableMarkers.findIndex(x=>x.position.lng() == e.latLng.lng());
var isSelectedLat = selectedMarkers.findIndex(x=>x.position.lat() == e.latLng.lat());
var isSelectedLng = selectedMarkers.findIndex(x=>x.position.lng() == e.latLng.lng());
if ((latIndex != -1 && lngIndex != -1) && (latIndex == lngIndex)) {
if ((isSelectedLat != -1 && isSelectedLng != -1) && (isSelectedLat == isSelectedLng)) {
selectedMarkers.splice(isSelectedLat, 1);
availableMarkers.push(markers[latIndex]);
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}
else if ((isAvailLat != -1 && isAvailLng != -1) && (isAvailLat == isAvailLng)) {
availableMarkers.splice(isAvailLat, 1);
selectedMarkers.push(markers[latIndex]);
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png');
}
else if ((isUnAvailLat != -1 && isUnAvailLng != -1) && (isUnAvailLat == isUnAvailLng)) {
alert('This Transit is not avaliable, pls select a valid transit');
}
}
});
}
google.maps.event.addDomListener(window, 'load', function () { initialize(39.759444, -84.191667); });
/*These styles area added to hide the google footer*/
a[href^="http://maps.google.com/maps"] {
display: none !important;
}
a[href^="https://maps.google.com/maps"] {
display: none !important;
}
.gmnoprint a, .gmnoprint span, .gm-style-cc {
display: none;
}
.gmnoprint div {
background: none !important;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Transit</title>
</head>
<body>
<div id="map" style="height:600px;"></div>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
</body>
</html>