Question

我试图在Google地图中向infoWindow添加图片，但我失败了因为我不懂语法。任何人都可以帮助我吗？

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

收集的

将图像添加到Google地图标记

1 个答案: