Google地图弹出式窗口不会显示任何内容 [英] Google Map pop -up windows doesn't show anything inside it
本文介绍了Google地图弹出式窗口不会显示任何内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在WordPress上使用PHP MYSQL和Google Map API，代码从MYSQL数据库中检索数据，并根据数据库中现有的坐标在地图上显示标记。它也显示一个infowindow单击Listener。
问题是infow窗口没有显示任何数据。
$
代码：
任何人都可以打电话给我，哪里是错误？ > <？php
/ *
模板名称：MAP2
* /
get_header（）;
？>
<！DOCTYPE html>
< html>
< head>
< title>自订标记< / title>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< script async defer
src =https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap >
< / script>
< style>
/ *总是显式设置地图高度来定义包含地图的div
*元素的大小。 * /
#map {
height：600px;
}
/ *可选：使样本页面填满窗口。 * /
html，body {
height：100％;
保证金：0;
padding：0;
}
< / style>
< / head>
< body>
< div id =map>< / div>
< script>
var map，currentPopup;
函数initMap（）{
map = new google.maps.Map（document.getElementById（'map'），{
zoom：8，
center：new google.maps .LatLng（33.888630,35.495480），
mapTypeId：'roadmap'
}）;
var iconBase ='https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking：{
icon：iconBase +'parking_lot_maps.png'
}，
library：{
icon：iconBase +' library_maps.png'
}，
info：{
icon：iconBase +'info-i_maps.png'
}
};
函数addMarker（特性）{
var marker = new google.maps.Marker（{
position：feature.position ，
// icon：图标[feature.type] .icon，
map：map
}）;
var popup = new google.maps.InfoWindow（{
content：feature，
maxWidth：300
}）;
google.maps.event.addListener（marker，click，function（）{
if（currentPopup！= null）{
currentPopup.close（）;
currentPopup = null;
}
popup.open（map，marker）;
currentPopup = popup;
}）;
google.maps.event.addListener（popup，closeclick，function（）{
map.panTo（center）;
currentPopup = null;
}）;
}
var features = [
<？php
global $ wpdb;
$ prependStr =;
foreach（$ wpdb-> get_results（SELECT siteID，latitude，longitude FROM site_coordinates2，OBJECT）as $ key => $ row）{
$ latitude = $ row-> latitude;
$ longitude = $ row-> longitude;
$ info = $ row-> siteID;
echo $ prependStr;
？>
{
position：new google.maps.LatLng（<？php echo $ latitude;？>，<？php echo $ longitude;？>），
}
<？php
$ prependStr =，;
}
？>
]; （var i = 0，feature; feature = features [i]; i ++）{
addMarker（feature）;
}
}
< / script>
< / body>
< / html>
<？php
get_footer（）;
？>
解决方案
如果我正确读取代码，已获得一系列功能，如下所示：
features = [
{position：new google.maps.LatLng （1，2）}，
{position：new google.maps.LatLng（3，4）}，
// etc ...
];
即该数组只包含位置属性的对象。所以，当你这样做时，你正确地引用了：
position：feature.position，
然而，当您尝试使用以下设置您的infowindow内容：
new google.maps.InfoWindow（{$ b $ content：feature，
maxWidth：300
}）
这不起作用，因为
content属性是一个字符串，而不是JS对象。你需要在那里指定一些文本。如果你只是想显示坐标，你可以这样做：
new google.maps.InfoWindow（{
content：feature.position.toString（），
maxWidth：300
}）
i am using PHP MYSQL on WordPress with Google Map API where the code retrieve data from the MYSQL database and display markers on the map based on the existing coordinates in the database. also it display a infowindow on click Listener.
the problem is that the infow window doesn't shows any data inside of it.
can anyone one tel me where is the error?
code:
<?php /* Template Name: MAP2 */ get_header(); ?> <!DOCTYPE html> <html> <head> <title>Custom Markers</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <script async defer src="https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap"> </script> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 600px; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> var map,currentPopup; function initMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: new google.maps.LatLng(33.888630, 35.495480), mapTypeId: 'roadmap' }); var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; var icons = { parking: { icon: iconBase + 'parking_lot_maps.png' }, library: { icon: iconBase + 'library_maps.png' }, info: { icon: iconBase + 'info-i_maps.png' } }; function addMarker(feature) { var marker = new google.maps.Marker({ position: feature.position, //icon: icons[feature.type].icon, map: map }); var popup = new google.maps.InfoWindow({ content: feature, maxWidth: 300 }); google.maps.event.addListener(marker, "click", function() { if (currentPopup != null) { currentPopup.close(); currentPopup = null; } popup.open(map, marker); currentPopup = popup; }); google.maps.event.addListener(popup, "closeclick", function() { map.panTo(center); currentPopup = null; }); } var features = [ <?php global $wpdb; $prependStr =""; foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) { $latitude = $row->latitude; $longitude = $row->longitude; $info = $row->siteID; echo $prependStr; ?> { position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>), } <?php $prependStr =","; } ?> ]; for (var i = 0, feature; feature = features[i]; i++) { addMarker(feature); } } </script> </body> </html> <?php get_footer(); ?>
解决方案If I'm reading your code right, you've got an array of features that looks like:
features = [ {position: new google.maps.LatLng(1, 2)}, {position: new google.maps.LatLng(3, 4)}, // etc... ];i.e. the array contains objects with just a
positionproperty. So you correctly refer to that when you do:position: feature.position,However when you try and set your infowindow content using:
new google.maps.InfoWindow({ content: feature, maxWidth: 300 })That won't work, because the
contentproperty is meant to be a string, not a JS object. You need to specify some text there. If you're just wanting to display the coordinates, you could do:new google.maps.InfoWindow({ content: feature.position.toString(), maxWidth: 300 })
这篇关于Google地图弹出式窗口不会显示任何内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
