Javascript-GoogleMaps API：如何在多个InfoWindows的内容中放置图像？

简而言之,我想将这两个主题结合起来：

How to add an image to InfoWindow of marker in google maps v3?

Google Maps JS API v3 – Simple Multiple Marker Example

我将位置数据存储在数据库中,并将其作为数组检索.我想为数据库中x个位置的每一个放置一个标记和信息窗口.字段之一包含图像,我想将其包含在infoWindow内容中.

这是我到目前为止的位置：

Php：
    //创建连接
    $con = mysqli_connect(“ *******”,“ *******”,“ *******”,“测试”);

// Check connection
if (mysqli_connect_errno($con))
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT Name, Latitude, Longitude, Image FROM locate_coords");


while($row = mysqli_fetch_array($result))
{
$users[]= $row;

}

Javascript函数initialize()：

<?php
$js_array = json_encode($users);
echo "var locations = ". $js_array . ";\n";
?>

var styles = [
   {
     stylers: [
       { hue: "#00ffe6" },
       { saturation: -20 },
     ]
   },{
     featureType: "road",
     elementType: "geometry",
     stylers: [
       { lightness: 100 },
       { visibility: "simplified" },
     ]
   },{
     featureType: "road",
     elementType: "labels",
     stylers: [
       { visibility: "off" }
     ]
   }
 ];

var styledMap = new google.maps.StyledMapType(styles,
   {name: "Styled Map"});

var mapProp = {
   zoom: 12,
   center: new google.maps.LatLng(51.508742,-0.120850),
   mapTypeControlOptions: {
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
   }
 };

 var map = new google.maps.Map(document.getElementById('map-canvas'),
   mapProp);


   var infowindow = new google.maps.InfoWindow();
   var marker, i;

   for (i = 0; i < locations.length; i++) {  

    //var container = document.getElementById("photo");

    //var img = new Image();
    //img.src = '
    //container.appendChild(img);

     marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
       map: map
     });

     google.maps.event.addListener(marker, 'click', (function(marker, i) {
       return function() {
        //infowindow.setContent('<img id=="photo">' + locations[i][0]);
        infowindow.setContent('<img src=/uploads/'. locations[i][3]'>' + locations[i][0]);
        infowindow.open(map, marker);
       }
     })(marker, i));

   }

map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}

google.maps.event.addDomListener(window, 'load', initialize);

放置普通图像url效果很好,但是当我尝试放置数组值时,地图就不想加载了！在这一点上,我真的可以用一个头脑清醒的头脑告诉我该怎么做:-( ..

解决方法:

行中有错字

infowindow.setContent('<img src=/uploads/'. locations[i][3]'>' + locations[i][0]);

.不是串联运算符,而是在location [i] [3]’>’之间根本没有串联运算符.正确的代码是：

infowindow.setContent('<img src=/uploads/' + locations[i][3] + '>' + locations[i][0]);

标签：infowindow,image,google-maps,arrays,javascript
来源： https://codeday.me/bug/20191123/2066348.html