【发布时间】：2016-11-13 19:08:48
【问题描述】：
我正在使用谷歌地图 API 制作地图，从数据库中检索数据并在地图上显示相应的标记。我按照以下说明执行此操作：https://developers.google.com/maps/articles/phpsqlajax_v3
我现在要做的是创建一个具有可拖动标记的页面（称为 add_marker.php），以便用户可以根据坐标将新标记添加到数据库中。当我在这个页面上时，我希望能够看到其他标记。我还在所有页面中包含地图代码，因此我不希望它仅针对此页面进行剧烈更改，因此我的方法如下：通过设置图标使可拖动标记在除 add_marker 页面之外的所有页面中不可见设置为空字符串“”。现在的问题是，我无法更改图标的图像，因此我可以在我希望它可见的特定页面中看到它。我在stackoverflow中搜索了很多并找到了一些解决方案，但这些都没有奏效。 我得到的错误是： add_marker.php:9 Uncaught Reference Error: drag_marker is not defined （即使我已将标记变量设为全局）
代码如下：
map_code.php（这是我在链接的帮助下创建的页面，除了一些变量名之外几乎与该代码相同。它包含在使用地图的文件中）
任何帮助将不胜感激
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"
type="text/javascript"></script>
<script type="text/javascript">
var drag_marker;
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.511769, 22.371699),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var content = markers[i].getAttribute("content");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var content = markers[i].getAttribute("content");
var icon = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
map: map,
position: point,
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
bindInfoWindow(marker, map, infoWindow, content, name);
}
});
*var uluru = {lat: 37.52, lng: 22.37};
drag_marker = new google.maps.Marker({
icon: " ",
draggable: true,
position: uluru,
map: map
});*
}
function SelectElement(valueToSelect)
{
var element = document.getElementById("markerList");
element.value = valueToSelect;
}
function bindInfoWindow(marker, map, infoWindow, html, name) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
infoWindow.setContent("<p>" + name + "<br />" +
html + "<br />");
SelectElement(name);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body onload="load()">
<div id="map" style="width: 99.5%; height: 40%"></div>
</body>
</html>
add_marker.php：
<html>
<head>
<title>My website</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
drag_marker.setIcon("http://maps.google.com/mapfiles/ms/icons/red-dot.png");
</script>';
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="Home.php"><img src="logo.png" align="center" alt="logo" style="width:300px;height:60px;"></a><a href="http://gav.uop.gr/"><img src="gavlab.png" align="right" alt="logo" style="width:200px;height:55px;"></a></h1>
</div>
<div id="content">
<div id="nav">
<h3>Πλοήγηση</h3>
<ul id="menu">
<li><a href="Home.php">Homepage</a></li>
<li align="left"><a href="Map.php">Map</a></li>
<li><a href="index.php">Admin log-in</a></li>
<li><a href="About.php">info</a></li>
<li><a href="Contact.php">Contact</a></li>
</ul>
</div>
<div id="main">
<h6 align="center">Map</h6>
<?php include("map_code.php"); ?>
<div align="center" id="admin_menu">
<?php
error_reporting(E_ALL & ~E_NOTICE ^ E_DEPRECATED ^ E_WARNING );
//http://www.clker.com/cliparts/e/3/F/I/0/A/google-maps-marker-for-residencelamontagne-hi.png
// icon:"http://maps.google.com/mapfiles/ms/icons/red-dot.png",
SESSION_START();
if($_SESSION['username'] == "admin"||$_SESSION['username'] == "username"){
echo '<p align="center" style="color:#8A2908"> Welcome <a href="logout.php"> εδώ.</a></p>';
$con= mysql_connect('localhost','root','');
mysql_set_charset('utf8');
mysql_select_db('qr code');
mysql_query("SET character_set_results = 'utf8', character_set_client = 'utf8', character_set_connection = 'utf8', character_set_database = 'utf8', character_set_server = 'utf8'", $con);
$sql="SELECT * FROM array1";
$records=mysql_query($sql);
echo '<form id="main_form" name = "add_new_marker" action="marker_info.php" method="post">';
'</form>';
}
else echo '<p align="center" style="color:#8A2908">Please log in <a href="index.php"> εδώ.</a></p>';
?>
</div>
</div>
</div>
<div id="footer">
Copyright © 2016 Name Here
</div>
</div>
</body>
</html>
【问题讨论】：
-
add_map.php 是什么？它没有加载任何谷歌地图库，也没有加载任何 JS，因此可以肯定“drag_marker”是未定义的，因为它完全在另一个文件中定义，此外，在您设置它之前，drag_marker 将是未定义的（加载地图后）
-
您可能指的是“add_marker.php”，它是允许您在地图上添加标记的页面。定义 drag_marker 的文件包含在主文件（add_map）中，所以我不明白为什么这不起作用。
-
哦，是的，对不起，add_marker，错过了包含，真的很困惑，他们两个都有完整的文档结构（
）包含在部分中，所以...... add_mark 中的JS首先运行，所以在那一刻没有你的变量 -
我认为这不是问题所在。 drag_marker 变量就像一个函数变量，我什至不能在同一个文件中运行（仅在初始化变量的加载函数中），即使我在代码开头定义了它。
标签： javascript php google-maps google-maps-api-3