您可以将图像添加到 google api 上标记上的内容框吗？

Question

我已经在 google 地图 API 上成功创建了一些标记。单击这些标记时，它们会生成一个信息框，其中包含我想要的任何文本。

for(p = 0; p < lat1.length; p++) {
 addMarker({
 coords:{lat: lat1[p],lng: lon1[p]},
 iconImage:'pointer12s.png',
 content:'<h1>bike</h1>'

 }); 
 }

function addMarker(props){
 var marker = new google.maps.Marker({
  position:props.coords,
  map: map,
  icon:props.iconImage
 });

 if(props.content){
  var infoWindow = new google.maps.InfoWindow({
   content:props.content
  });

  marker.addListener('click', function () {
   infoWindow.open(map, marker);
  });
  marker.addListener('click', function () {
   addMarker({
   coords:{lat: 59.896874,lng: -5.125914},
   iconImage:'pointer12s.png',
   content:'<h1>bike</h1>'                
   }); 
  });
                  
 }

}

我基本上想要这个：

for(p = 0; p < lat1.length; p++) {
 addMarker({
 coords:{lat: lat1[p],lng: lon1[p]},
 iconImage:'pointer12s.png',
 content:'<h1>bike</h1>'

 }); 
 }

要变成这样：（见下文 'content'）

for(p = 0; p < lat1.length; p++) {
 addMarker({
 coords:{lat: lat1[p],lng: lon1[p]},
 iconImage:'pointer12s.png',
 content:'image.png'

 }); 
 }

当我尝试这个时，它显然只是在框中显示 'image.png'，有没有办法在框中显示该图像？

我目前在前端很糟糕，所以任何帮助或正确方向的指示将不胜感激。

Answer 1

'<img src="'+props.content+'"/>' 应该可以。

Proof of concept fiddle

"use strict";

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: {
      lat: -33.9,
      lng: 151.2
    }
  });
  setMarkers(map);
} // Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.

const beaches = [
  ["Bondi Beach", -33.890542, 151.274856, 4],
  ["Coogee Beach", -33.923036, 151.259052, 5],
  ["Cronulla Beach", -34.028249, 151.157507, 3],
  ["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
  ["Maroubra Beach", -33.950198, 151.259302, 1]
];

function setMarkers(map) {
  // Adds markers to the map.
  // Marker sizes are expressed as a Size of X,Y where the origin of the image
  // (0,0) is located in the top left of the image.
  // Origins, anchor positions and coordinates of the marker increase in the X
  // direction to the right and in the Y direction down.
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(20, 32),
    // The origin for this image is (0, 0).
    origin: new google.maps.Point(0, 0),
    // The anchor for this image is the base of the flagpole at (0, 32).
    anchor: new google.maps.Point(0, 32)
  }; // Shapes define the clickable region of the icon. The type defines an HTML
  // <area> element 'poly' which traces out a polygon as a series of X,Y points.
  // The final coordinate closes the poly by connecting to the first coordinate.

  const shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: "poly"
  };
  for (var p = 0; p < beaches.length; p++) {
    addMarker({
      coords: {
        lat: beaches[p][1],
        lng: beaches[p][2]
      },
      iconImage: 'pointer12s.png',
      content: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfYe3qsJ1RnyFnZTb9-w2xyZEV39owvbum6ea_yHmbp2II4M9Nh3_k&s=0'

    });
  }
}

function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
    // icon: props.iconImage
  });

  if (props.content) {
    var infoWindow = new google.maps.InfoWindow({
      content: '<img src="' + props.content + '""/>'
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
    marker.addListener('click', function() {
      addMarker({
        coords: {
          lat: 59.896874,
          lng: -5.125914
        },
        // iconImage:'pointer12s.png',
        content: props.content
      });
    });

  }

}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Complex Marker Icons</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

您可以将图像添加到 google api 上标记上的内容框吗？

Can you add an image to a content box on a marker on google api?

html

javascript

google-maps

google-maps-markers