在谷歌地图中点击标记添加信息窗口
Posted
技术标签:
【中文标题】在谷歌地图中点击标记添加信息窗口【英文标题】：adding info window on click on marker in google map 【发布时间】：2017-07-26 10:21:50 【问题描述】：我正在使用 php 和 mysql 来从数据库中检索数据并在 Google Map API 上显示标记，并添加了一个信息窗口，其中包括使用 click-Listener 从数据库中检索到的信息。 添加信息窗口后，它似乎不起作用。
我的错误在哪里？
代码：
<?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=AIzaSyCquey2tCZ32jLJJDEEi2D7_RnXXyj9RTI&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 class="map-popupstring hidden" id="popupstring1">
<div class="text-center">
<h3>title</h3>
<p>subinfo</p>
</div>
</div>
</div>
<script>
var map;
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'
;
var $popup = $("#popupstring1")
function addMarker(feature)
var marker = new google.maps.Marker(
position: feature.position,
//icon: icons[feature.type].icon,
data-popupstring-id: $popup,
map: map
);
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; ?>),
type: '<?php echo $info; ?>'
<?php
$prependStr =",";
?>
];
var infowindow = new google.maps.InfoWindow();
for (var i = 0, feature; feature = features[i]; i++)
addMarker(feature);
</script>
</body>
</html>
<?php
get_footer();
?>
【问题讨论】：
Google Map pop -up windows doesn't show anything inside it的可能重复 【参考方案1】： <div class="map-popupstring hidden" id="popupstring1">
<div class="text-center">
<h3>title</h3>
<p>subinfo</p>
</div>
</div>
您必须在 html 标签中放入想要的弹出窗口。和谷歌地图标签中的代码来初始化它。
并使用data-popupstring-id="#popupstring1" 标签在单击标记时对其进行初始化。
var $popup = $("#popupstring1")
function addMarker(feature)
var marker = new google.maps.Marker(
position: feature.position,
data-popupstring-id: $popup,
map: map
);
【讨论】：
我不知道如何将您的答案放入代码中，我是 Google Map API 的新手 你把html放在<div id="map"></div>下面
我试过你的答案，但它不起作用我将编辑代码并显示编辑后的代码
我对此一无所知。对不起。【参考方案2】：
我通过添加以下代码解决了这个问题：
代码：
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;
);
【讨论】：
以上是关于在谷歌地图中点击标记添加信息窗口的主要内容，如果未能解决你的问题，请参考以下文章