Question

我有一个让我头疼的简单问题。我有一个简单的谷歌地图与一些标记。

<script>

  function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      streetViewControl: false,
      center: {lat: 52.268157373768176, lng: 19.8193359375}
    });

    // Create an array of alphabetical characters used to label the markers.
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        label: labels[i % labels.length]
      });
    });



    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }
  var locations = [
    {lat: 52.22275209302143, lng: 21.012039184570312},
    {lat: 52.206765109213755, lng: 21.024742126464844},
    {lat: 52.21139351204487, lng: 20.98114013671875},
    {lat: 52.21344458183311, lng: 21.010665893554688},
    {lat: 51.09252617822148, lng: 17.06073760986328}, 
    {lat: 51.093819933267405, lng: 17.04975128173828}, 
    {lat: 51.11085099910474, lng: 17.03533172607422}, 
    {lat: 51.108048849946385, lng: 17.02880859375}, 
    {lat: 53.41730790717656, lng: 14.585723876953125}, 
    {lat: 53.40912254769818, lng: 14.574737548828125}, 
    {lat: 53.416591751111206, lng: 14.57937240600586}, 

  ]
</script>

我希望能够将它放在我的网站上并能够在其旁边写文字。我希望用一个简单的表来实现它，但它不起作用。我怎么能这样做？

<table style="width: 70%;" border="1" cellpadding="1">
    <tbody>
        <tr>
           <td><div>1</div></td>
           <td><div>2</div></td>
           <td><div>3</div></td>
        </tr>
        <tr>
           <td><div>4</div></td>
           <td><div id="map"></div></td>
           <td><div>6</div></td>
        </tr>
        <tr>
           <td><div>7</div></td>
           <td><div>8</div></td>
           <td><div>9</div></td>
        </tr>
    </tbody>
</table>

Answer 1

与提到的paul-thomas-gc一样，您可以使用CSS浮点数实现此目的。您可以在CSS Tricks中找到对浮点数的一个很好的介绍：https://css-tricks.com/all-about-floats/

在您的情况下，您需要将两个div放在一起：

<div class="g-map">...</div>
<div class="content">...</div>

CSS：

.g-map {
  float: left;
  width: 70%;
}
.content {
  float: left;
  width: 30%;
}

在谷歌地图周围添加文字

1 个答案: