Php 如何在谷歌地图上添加信息窗口和标记
在WordPress和GoogleMapAPI上使用PHP和MYSQL从MYSQL数据库检索数据,并在GoogleMap上显示带有信息窗口的标记 问题是我无法在infoWindow中显示从数据库中检索到的数据作为站点ID,它是所选表中的一个字段 使用以下代码标记不会显示在地图上 代码:Php 如何在谷歌地图上添加信息窗口和标记,php,mysql,google-maps,marker,infowindow,Php,Mysql,Google Maps,Marker,Infowindow,在WordPress和GoogleMapAPI上使用PHP和MYSQL从MYSQL数据库检索数据,并在GoogleMap上显示带有信息窗口的标记 问题是我无法在infoWindow中显示从数据库中检索到的数据作为站点ID,它是所选表中的一个字段 使用以下代码标记不会显示在地图上 代码: 自定义标记 /*始终明确设置贴图高度以定义div的大小 *包含映射的元素*/ #地图{ 高度:600px; } /*可选:使示例页面填充窗口*/ html,正文{ 身高:100%; 保证金:0; 填充:0; }
自定义标记
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
高度:600px;
}
/*可选:使示例页面填充窗口*/
html,正文{
身高:100%;
保证金:0;
填充:0;
}
var映射,当前弹出窗口;
函数initMap(){
map=new google.maps.map(document.getElementById('map'){
缩放:8,
中心:新google.maps.LatLng(33.888630,35.495480),
mapTypeId:“路线图”
});
iconBase变量https://maps.google.com/mapfiles/kml/shapes/';
变量图标={
停车场:{
图标:iconBase+“parking\u lot\u maps.png”
},
图书馆:{
图标:iconBase+“library_maps.png”
},
信息:{
图标:iconBase+“info-i_maps.png”
}
};
功能添加标记(功能){
var marker=new google.maps.marker({
位置:feature.position,
//图标:图标[feature.type]。图标,
地图:地图
});
var popup=new google.maps.InfoWindow({
//内容:feature.position.toString(),
//这是一条出错的线
内容:feature.info,
最大宽度:300
});
google.maps.event.addListener(标记“单击”,函数(){
如果(currentPopup!=null){
currentPopup.close();
currentPopup=null;
}
弹出。打开(地图、标记);
当前弹出=弹出;
});
google.maps.event.addListener(弹出窗口“closeclick”,函数(){
潘托地图(中);
currentPopup=null;
});
}
变量特征=[
{
位置:新google.maps.LatLng(,),
资料:(),
}
];
for(变量i=0,特征;特征=特征[i];i++){
添加标记(特征);
}
}
根据info参数将圆括号替换为单引号。谢谢。将圆括号替换为info参数的单引号。谢谢。你从查询中得到了坐标(纬度、经度)吗?@user1544541是的,你的答案很有效。谢谢,太好了!!!请接受我的回答。谢谢。如何使这些图标代替常规标记出现??我有图标,但也没有显示所需的图标请详细说明。谢谢。我想要图标而不是普通的标记。如何在代码中做到这一点??javascript或php?只需在info参数后添加icon参数。明白了吗?并将图标参数值设置为具有绝对路径的自定义图标。
<?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>
<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.position.toString(),
// this line that makes the error
content: feature.info,
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; ?>),
info:(<?php echo $info;?>),
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
</body>
</html>
<?php
get_footer();
?>