围绕Google地图添加文字

Question

我有一个简单的问题，使我头疼。我有一个简单的Google地图，上面有一些标记。

<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技巧上找到对浮子的很好介绍：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%;
}