谷歌地图与响应侧边栏

时间：2016-02-24 19:06:29

标签： google-maps

这是我在此link中找到的Google地图。  enter image description here

我想知道如何实现像这样的响应式边栏： enter image description here

还有另一个不同的侧边栏 enter image description here

有人知道这是什么功能或如何实现它？与此example类似。 我在google maps docs

中找不到

2 个答案:

答案 0 :(得分：1)

一种选择是修改example you link to，将the examples I linked to in my comments中的标记信息侧边栏放在其动态侧边栏中。

example

代码段

＆＃13;
＆＃13; 
// arrays to hold copies of the markers and html used by the side_bar 
// because the function closure trick doesnt work there 
var gmarkers = [];
var map = null;

function initialize() {
  var myWrapper = $("#wrapper");
  $("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
    myWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
      // code to execute after transition ends
      google.maps.event.trigger(map, 'resize');
    });
  });
  // create the map
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787, -79.359741),
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // Add markers to the map
  // Set up three markers with info windows 
  // add the points    
  var point = new google.maps.LatLng(43.65654, -79.90138);
  var marker = createMarker(point, "This place", "Some stuff to display in the<br>First Info Window")

  var point = new google.maps.LatLng(43.91892, -78.89231);
  var marker = createMarker(point, "That place", "Some stuff to display in the<br>Second Info Window")

  var point = new google.maps.LatLng(43.82589, -78.89231);
  var marker = createMarker(point, "The other place", "Some stuff to display in the<br>Third Info Window")
}

var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
  var contentString = html;
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat() * -100000) << 5
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
  });
  // save the info we need to use later for the side_bar
  gmarkers.push(marker);
  // add a line to the side_bar html
  var sidebar = $('#side_bar');
  var sidebar_entry = $('<li/>', {
    'html': name,
    'click': function() {
      google.maps.event.trigger(marker, 'click');
    },
    'mouseenter': function() {
      $(this).css('color', 'red');
    },
    'mouseleave': function() {
      $(this).css('color', '#999999');
    }
  }).appendTo(sidebar);
}

google.maps.event.addDomListener(window, 'load', initialize);
＆＃13; 
html,
body {
  height: 100%;
}
#map_canvas,
#wrapper,
#page-content-wrapper {
  height: 100%;
  width: 100%;
}
.container-fluid,
.row,
.col-lg-12 {
  height: 100%;
  width: 100%;
}
}
/* hamburger menu pseudo element */

.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
}
.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black;
}
/* hamburger menu pseudo element gradient */

.gradient-menu {
  padding-left: 1.25em;
  position: relative;
}
.gradient-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.21em;
  bottom: 0.21em;
  width: 1em;
  background: linear-gradient(to bottom, black, black 20%, white 20%, white 40%, black 40%, black 60%, white 60%, white 80%, black 80%, black 100%);
}
/* http://www.jqueryscript.net/demo/Bootstrap-Sidebar-Extension-With-jQuery-CSS-CSS3/ */

/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */

.nav-tabs>li {
  float: none;
}
.nav-tabs {
  border-bottom: 0;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  margin: 0;
  border-radius: 0;
}
#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled {
  padding-left: 250px;
}
#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 250px;
  width: 0;
  height: 100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
  width: 250px;
}
#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -250px;
}
/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px;
}
.sidebar-nav li a {
  display: block;
  text-decoration: none;
  color: #999999;
}
.sidebar-nav li a:hover {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
  height: 65px;
  font-size: 18px;
  line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
  color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}
@media(min-width:768px) {
  #wrapper {
    padding-left: 250px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }
  #sidebar-wrapper {
    width: 250px;
  }
  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}
＆＃13; 
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <!-- Sidebar -->
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav" id="side_bar">
      <li class="sidebar-brand" style="font-weight: bold; color: #999999;">
        <h1>Places</h1>
      </li>
      <hr>
    </ul>
  </div>
  <!-- /#sidebar-wrapper -->
  <!-- Page Content -->
  <div id="page-content-wrapper">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <h1>
	    <a href="#menu-toggle" class="gradient-menu" id="menu-toggle"></a>
          &nbsp;Map&nbsp;<!-- a href="#menu-toggle" class="btn btn-default" >Toggle Sidebar</a -->
          </h1>
          <!-- you can use tables or divs for the overall layout -->
          <div id="map_canvas"></div>
          <h1>Simple Sidebar</h1>
        </div>
      </div>
    </div>
  </div>
  <!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我找到了解决方案。 它是一个创建和共享自定义地图的应用程序。 我没有时间去挖掘内部，但它似乎是为了帮助那些不熟悉Maps API等代码的人而创建的。 名称为My Maps。

我们可以创建地图和图层。 层实际上是我正在寻找的侧栏。

我找到了一个论坛来解决与此应用相关的问题 在此link。

相关问题
最新问题