-1
我想单击一个地图标记，并在div中显示地图下面的信息。我有下面的代码。总是显示相同的div，如何做每个标记？ ................................................. .................................................. ............................如何在div中显示Google标记中的信息？
的.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Custom Google map, with multiple markers, the clicking markers show the outside map div" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body >
<div id="map-canvas"></div>
<div id="test">
<h1>test</h1>
<img src="https://www.google.org/assets/static/images/logo_googledotorg-171e7482e5523603fc0eed236dd772d8.svg" width="128" height="128" alt="Mountain View">
</div>
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMJVE1N5mUEQaJFulw7omVluNrXqzOipk&callback=initMap"
type="text/javascript"></script>
<script src="js/scripts.js"></script>
</body>
</html>
的.js
var map;
var brooklyn = new google.maps.LatLng(-33.9, 151.2);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var featureOpts = [
{
stylers: [
{ hue: '#890000' },
{ visibility: 'simplified' },
{ gamma: 0.5 },
{ weight: 0.5 }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'water',
stylers: [
{ color: '#890000' }
]
}
];
var mapOptions = {
zoom: 12,
center: brooklyn,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
setMarkers(map, beaches);
}
var gmarkers = [];
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: beach[0],
zIndex: beach[3]
});
gmarkers.push(marker);
google.maps.event.addListener(marker, "click", function() {
$('#test').css('display', 'block');
$(".dropdown").removeClass("is-expanded");
var target = $('#test');
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
.css
html, body, #map-canvas {
height: 90%;
margin: 0px;
padding: 0px
}
#test{
display:none;
}
好像你的代码已经由于在谷歌API错误您后被装代码呢。你能解决这些问题，以便我们有一个最小的，完整的和可验证的例子吗？ https://stackoverflow.com/help/mcve –
对不起，我会把完整的代码。 – FranciscoM