Question

我想点击地图标记，它会在div中显示地图下方的信息。我在下面有这个代码。总是显示相同的div，如何为每个标记做什么？ .................................................. .................................................. ...........................

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;
}

Answer 1

使用标记中的某些数据更改div的内容，例如标题：

google.maps.event.addListener(marker, "click", function() {
  $('#test').text(this.getTitle())
  $('#test').css('display', 'block');
  $(".dropdown").removeClass("is-expanded");
  var target = $('#test');
  $('html,body').animate({
    scrollTop: target.offset().top
  }, 1000);
  return false;
});

proof of concept fiddle

代码段

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').text(this.getTitle())
      $('#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);

html,
body,
#map-canvas {
  height: 80%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#test {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
<div id="test">
  <h1>test</h1>
</div>

如何在div中显示来自Google标记的信息？

1 个答案: