我为此感到苦恼-使用一些自定义信息窗口获得了Google Map。因此，单击标记将更改左侧框中的信息。在页面上的负载上显示了默认值，当您单击地图上的不同点时，需要进行更改。我的法国正在更改，但您不能单击其他项目。纽约州也是如此。有什么想法我要去哪里吗？
我已在我的代码下方附加。任何帮助将不胜感激。
希望有帮助。
function initialize() {
var mapoptions = {
center: {
lat: 40.7499256,lng: -73.9854028
},zoom: 3,zoomControl: false,panControl: false,streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapoptions);
var img = "https://i.stack.imgur.com/JWM0W.png";
var NewYork = new google.maps.Marker({
position: mapoptions.center,map: map,icon: img
});
var London = new google.maps.Marker({
position: {
lat: 51.5106122,lng: -0.1529072
},icon: img
});
var Paris = new google.maps.Marker({
position: {
lat: 48.8588589,lng: 2.3470599
},icon: img
});
var HongKong = new google.maps.Marker({
position: {
lat: 22.2753729,lng: 114.1757384
},icon: img
});
var markers = {
'NewYork': NewYork,'London': London,'Paris': Paris,'HongKong': HongKong
};
NewYork.addListener('click',changeContent);
Paris.addListener('click',changeContentTwo);
var styles = [{
"featureType": "water","elementType": "geometry.fill","stylers": [{
"color": "#d3d3d3"
}]
},{
"featureType": "transit","stylers": [{
"color": "#808080"
},{
"visibility": "off"
}
]
},{
"featureType": "road.highway","elementType": "geometry.stroke","stylers": [{
"visibility": "on"
},{
"color": "#b3b3b3"
}
]
},"stylers": [{
"color": "#ffffff"
}]
},{
"featureType": "road.local",{
"color": "#ffffff"
},{
"weight": 1.8
}
]
},"stylers": [{
"color": "#d7d7d7"
}]
},{
"featureType": "poi",{
"color": "#ebebeb"
}
]
},{
"featureType": "administrative","elementType": "geometry","stylers": [{
"color": "#a7a7a7"
}]
},{
"featureType": "road.arterial",{
"featureType": "landscape",{
"color": "#efefef"
}
]
},{
"featureType": "road","elementType": "labels.text.fill","stylers": [{
"color": "#696969"
}]
},{
"color": "#737373"
}
]
},"elementType": "labels.icon","stylers": [{
"visibility": "off"
}]
},"elementType": "labels","stylers": [{
"color": "#d6d6d6"
}]
},{},"stylers": [{
"color": "#dadada"
}]
}
];
map.setOptions({
styles: styles
});
function changeContent() {
$("#klk-map-content-1").fadeOut("fast",function() {
$("#klk-map-content-2").fadeIn("slow");
});
}
function changeContentTwo() {
$("#klk-map-content-1").fadeOut("fast",function() {
$("#klk-map-content-3").fadeIn("slow");
});
}
// $(".activebox").fadeOut("fast",function(){
// $("#klk-map-content-1").fadeIn("slow");
// $("#klk-map-content-2").fadeIn("slow");
// $("#klk-map-content-3").fadeIn("slow");
// });
function getcoords(position) {
var text = position.replace(/[()]/g,'').split(",");
var lat = Number(text[0]);
var lng = Number(text[1]);
return {
lat: lat,lng: lng
};
}
}
google.maps.event.addDomListener(window,'load',initialize);* {
box-sizing: border-box !important;
}
html,body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 85%;
width: 100%;
}
#overlay {
background-color: black;
height: 100%;
width: 100%;
z-index: 1000;
}
#active {
background-color: #333;
display: block;
margin-bottom: -5px;
height: 5px;
width: 25.00%;
position: relative;
z-index: 999;
}
.nav {
display: table;
height: 15%;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
border-left: 1px solid #E5E5E5;
color: #787878;
cursor: pointer;
display: table-cell;
font-family: 'Sanchez',serif;
text-align: center;
vertical-align: middle;
width: 25%;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.nav li:first-child {
border-left: none;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Link -->
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Sanchez">
</head>
<body>
<!-- Content -->
<div id="map-canvas" style="position: relative; overflow: hidden;"></div>
<div id="overlay" class="activebox" style="display: block; position: absolute; z-index: 1000; background-color: white; top: 50px; left: 10px; height: auto; width: 300px; overflow: auto; border-top: 5px green solid; padding: 1rem;">
<div class="klk-map-contents" id="klk-map-content-1">Content 1</div>
<div class="klk-map-contents" id="klk-map-content-2" style="display: none;">Content 2</div>
<div class="klk-map-contents" id="klk-map-content-3" style="display: none;">Content 3</div>
</div>
<!-- Script CDN -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<!-- Script -->
</body>
</html>