不能从PHP文件更改Google Maps标记的图标
Can't change the icon of a Google Maps marker from a PHP file
我使用google maps API制作从数据库检索数据并在地图上显示相应标记的地图。我是按照下面的说明来做的:https://developers.google.com/maps/articles/phpsqlajax_v3
我现在要做的是创建一个具有可拖动标记的页面(称为add_marker.php)，以便用户可以根据坐标将新标记添加到数据库中。当我在这页上的时候，我希望能看到其他的标记。我还包括地图代码在所有的页面，所以我不希望它彻底改变只是为了这个页面，所以我的方法是以下:使可拖动的标记不可见的所有页面，除了add_marker页面通过设置图标设置为空字符串"。现在的问题是，我不能改变图标的图像，所以我可以看到它在特定的页面，我想要它可见。我在stackoverflow中搜索了相当多，并找到了一些解决方案，但这些都不起作用。我得到的错误是:add_marker.php:9未捕获的引用错误:未定义drag_marker(尽管我已经将标记变量设置为全局)
代码如下:
map_code.php(这是我在链接的帮助下创建的页面，除了一些变量名之外，几乎与该代码相同。它包含在使用map
的文件中。如有任何帮助，不胜感激
<!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>
您试图在定义drag_marker变量之前使用它(也可能在初始化之前，查看浏览器中呈现的HTML/JavaScript)。
要处理计时问题，请尝试:
google.maps.event.addDomListener(window, 'load', function() {
drag_marker.setIcon("http://maps.google.com/mapfiles/ms/icons/red-dot.png");
}):
相关文章：
- Javascript更改图标
- 单击更改图标并通过javascript添加一个css类
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 单击超链接时，如何使用Google Maps API v3缩放地图
- 如何更改角度谷歌地图上的集群图标
- 使用Google Maps API向标记添加多个字符
- simpleweather js天气图标
- 更改图层中单个矢量特征的图标
- 使用Angular单击时更改特定图示符图标的颜色
- 加载图像时加载图标
- Google Maps API OverlayView(）在AngularJS指令中不起作用
- 可以'点击汉堡包图标后，菜单无法正常打开
- 持久页面操作图标
- 使用Google Maps API驱动时间多边形
- 点击图标是't在量角器上工作
- 在for循环中使用多维数组设置google.maps.Marker图标
- 不能从PHP文件更改Google Maps标记的图标
- Google Maps API V3通过不同的图标表示同一位置的多个标记
- 如何改变标记图标在vue-google-maps
- Google Maps API data.setStyle 未在地图上显示图标
