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

Posted 2023-03-28

【中文标题】您可以在 google api 上的标记上将图像添加到内容框中吗？

【英文标题】：Can you add an image to a content box on a marker on google api?

【发布时间】：2020-11-14 15:02:35

【问题描述】：

我已经成功地在谷歌地图 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>'

 ); 
 

变成这样：（见下面的“内容”）

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

 ); 
 

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

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

【参考方案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>