在谷歌地图API（js）上添加一些带有文字的标签

Question

这是我的谷歌地图脚本：

   <h3>My Google Maps Demo</h3>
<div id="map" style="height: 400px; width: 100%;"></div>
<script>
  function initMap() {
    var uluru = {lat: 42.643484, lng: 23.3355926};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 18,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALIoCDadlZFkBXVHqvvnM6jEaYXllAjbk&callback=initMap">
</script>

我想添加一些标签文字（如下图所示）。我尝试了几乎所有在这里和谷歌找到的人，但没有成功。 如果有人可以提供帮助..

Answer 1

您可以考虑使用Google API中的InfoWindows： https://developers.google.com/maps/documentation/javascript/infowindows

InfoWindow将接受一个HTML输入来返回一个对象，该对象可以被标记为标记的onClick事件监听器。

let info = new gmaps.InfoWindow({
        content: eventInfoContent // this will be the html for your design
    });
gmaps.event.addListener(marker, 'click', () =>{
        info.open(map,marker);
});

希望这有帮助！

Answer 2

这是怎么回事，https://jsfiddle.net/linushg111/jr3uoag1/这是此版本的修改版https://developers.google.com/maps/documentation/javascript/examples/map-coordinates

function initMap() {
  var chicago = new google.maps.LatLng(41.850, -87.650);

  var map = new google.maps.Map(document.getElementById('map'), {
    center: chicago,
    zoom: 3
  });

  var coordInfoWindow = new google.maps.InfoWindow();
  coordInfoWindow.setContent(createInfoWindowContent(chicago, map.getZoom()));
  coordInfoWindow.setPosition(chicago);
  coordInfoWindow.open(map);

  map.addListener('zoom_changed', function() {
    coordInfoWindow.setContent(createInfoWindowContent(chicago, map.getZoom()));
    coordInfoWindow.open(map);
  });
}

var TILE_SIZE = 256;

function createInfoWindowContent(latLng, zoom) {
  var scale = 1 << zoom;

  var worldCoordinate = project(latLng);

  var pixelCoordinate = new google.maps.Point(
      Math.floor(worldCoordinate.x * scale),
      Math.floor(worldCoordinate.y * scale));

  var tileCoordinate = new google.maps.Point(
      Math.floor(worldCoordinate.x * scale / TILE_SIZE),
      Math.floor(worldCoordinate.y * scale / TILE_SIZE));

  return [
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum arcu at velit sodales, vitae tempor dui facilisis. Nulla luctus interdum magna, non porta libero imperdiet et. Morbi tincidunt orci quis tellus maximus, ut varius augue feugiat. Donec ullamcorper faucibus quam sit amet mattis. Cras nec dui pretium, vulputate ligula vitae, sodales diam. Pellentesque habitant morbi tristique senectus  '
  ].join('<br>');
}

// The mapping between latitude, longitude and pixels is defined by the web
// mercator projection.
function project(latLng) {
  var siny = Math.sin(latLng.lat() * Math.PI / 180);

  // Truncating to 0.9999 effectively limits latitude to 89.189. This is
  // about a third of a tile past the edge of the world tile.
  siny = Math.min(Math.max(siny, -0.9999), 0.9999);

  return new google.maps.Point(
      TILE_SIZE * (0.5 + latLng.lng() / 360),
      TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI)));
}