Question

所以我正在尝试修改我创建的地图。我想添加一个侧边栏，我希望它以点击为中心。像这样 - ＆gt; http://marcgrabanski.com/resources/jquery-google-maps/tutorial-part1.html

到目前为止，这是我的代码

<html>

  <head>
    <style>
      html, body, #map-canvas {
        height: 100%; 
        margin: 0; 
        padding: 0
      }
    </style>
    
    <script src="https://maps.googleapis.com/maps/api/js?KEY=AIzaSyCo0yGy0Qk9b1x4pFDnk_rMQibhBroLW8M"></script>
    <script>

  function initialize() {

    var locations = [
      ['<b><a href="#RSVP"><span style="font-size: large;">RSVP</span></a></b>', 6.428073, 3.421507, 1],
      ['<b><a href="#Izanagi"><span style="font-size: large;">Izanagi</span></a></b>', 6.426412, 3.414347, 2],
      ['<b><a href="#Bistro7"><span style="font-size: large;">Bistro 7</span></a></b>', 6.433162, 3.423306, 3],
      ['<b><a href="#SpiceRoute"><span style="font-size: large;">Spice Route</span></a></b>', 6.429500, 3.420479, 4],
      ['<b><a href="#355"><span style="font-size: large;">355</span></a></b>', 6.428518, 3.428305, 5]
    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      disableDefaultUI: true,
      scrollwheel: false,
      draggable: true,
      zoom: 14,
      center: new google.maps.LatLng(6.456528,3.408272),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();
    
    var iconBase = 'http://maps.google.com/mapfiles/kml/pal2/';

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: iconBase + 'icon44.png'
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);


    </script>
  </head>

  <body>
    <div id="map-canvas"></div>
  </body>

</html>

编辑：我做了一些东西（代码粘贴），我想把它转换成另一个（链接粘贴）。我正在询问如何做的指示。

Answer 1

在您链接到的示例中，地图在点击时移动的方式在这里完成（评论是我的）：

// looping through each marker, creating a li
$(markers).each(function(i,marker){
$("<li />")
    .html("Point "+i)
// calling the displayPoint() function on click
    .click(function(){
        displayPoint(marker, i);
    })
    .appendTo("#list");

GEvent.addListener(marker, "click", function(){
    displayPoint(marker, i);
});
});

$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

...

// the displayPoint() function calls map.panTo, which will pan to the marker
map.panTo(marker.getLatLng());

Here is a jsfiddle使用您的代码以及您链接的网站的一些更新

使用侧边栏创建谷歌地图

1 个答案: