javascript - 将图像添加到 Google map 标记

Question

我试图将图像添加到 Google map 中的信息窗口，但我失败了，因为我不懂语法。谁能帮帮我？？

var marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(-36.848461,174.7633),
            title:"hello"
        });

marker1.setMap(map);

var infowindow1 =  new google.maps.InfoWindow({
            content: 'hey there',
            map: map,
        });

google.maps.event.addListener(marker1, 'mouseover', function() {
        infowindow1.open(map,marker1);
    });

google.maps.event.addListener(marker1, 'mouseout', function() {
        infowindow1.close();
    });

以上代码仅显示文本。我如何将图像添加到将在鼠标悬停时出现的 infoWindow

谢谢。

Answer 1

这很简单。只需在您的内容中添加一个 img 标签-

// This example displays a marker at the center of Australia.
// When the mouse pointer hovers over the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div><p>Here is your image</p><img style="height:100px;width:150px;" src="https://upload.wikimedia.org/wikipedia/commons/f/fc/Uluru_%28Helicopter_view%29-crop.jpg" /></div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('mouseover', function() {
    infowindow.open(map, marker);
  });
  marker.addListener('mouseout', function() {
    infowindow.close();
  });
}

我从Here收集的