javascript - 谷歌地图自定义信息窗口 - 打开一个然后关闭另一个打开等

Question

我正在为此苦苦挣扎-获得了带有一些自定义信息窗口的 Google 地图。因此，单击标记将更改左侧框中的信息。在页面加载时显示默认值，当您单击地图上的不同点时需要更改。我有法国改变，但你不能点击其他项目。纽约也一样。任何想法我哪里出错了？

我附在我的代码下面。任何帮助都感激不尽。

希望有帮助。

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
    },
    map: map,
    icon: img
  });

  var Paris = new google.maps.Marker({
    position: {
      lat: 48.8588589,
      lng: 2.3470599
    },
    map: map,
    icon: img
  });

  var HongKong = new google.maps.Marker({
    position: {
      lat: 22.2753729,
      lng: 114.1757384
    },
    map: map,
    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"
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#ffffff"
      }]
    },
    {
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [{
          "visibility": "on"
        },
        {
          "color": "#ffffff"
        },
        {
          "weight": 1.8
        }
      ]
    },
    {
      "featureType": "road.local",
      "elementType": "geometry.stroke",
      "stylers": [{
        "color": "#d7d7d7"
      }]
    },
    {
      "featureType": "poi",
      "elementType": "geometry.fill",
      "stylers": [{
          "visibility": "on"
        },
        {
          "color": "#ebebeb"
        }
      ]
    },
    {
      "featureType": "administrative",
      "elementType": "geometry",
      "stylers": [{
        "color": "#a7a7a7"
      }]
    },
    {
      "featureType": "road.arterial",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#ffffff"
      }]
    },
    {
      "featureType": "road.arterial",
      "elementType": "geometry.fill",
      "stylers": [{
        "color": "#ffffff"
      }]
    },
    {
      "featureType": "landscape",
      "elementType": "geometry.fill",
      "stylers": [{
          "visibility": "on"
        },
        {
          "color": "#efefef"
        }
      ]
    },
    {
      "featureType": "road",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#696969"
      }]
    },
    {
      "featureType": "administrative",
      "elementType": "labels.text.fill",
      "stylers": [{
          "visibility": "on"
        },
        {
          "color": "#737373"
        }
      ]
    },
    {
      "featureType": "poi",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "poi",
      "elementType": "labels",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "road.arterial",
      "elementType": "geometry.stroke",
      "stylers": [{
        "color": "#d6d6d6"
      }]
    },
    {
      "featureType": "road",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {},
    {
      "featureType": "poi",
      "elementType": "geometry.fill",
      "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>

标签： javascriptjquerygoogle-maps