我正在尝试创建一个自定义地图，我将在其中设置一些带有自定义图标的标记。该图标在我的本地主机上正常显示，但是当我将所有文件上传到我的服务器时，自定义图标不会出现！该地图显示了默认的 GMap 标记，证明我的数据库连接正常。以下是我的代码：
索引.php：
<!DOCTYPE html>
<html lang="en">
<head>
<title>My map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="map-canvas"></div>
<script type="text/javascript">
var map;
var allMarkers = [];
var customIcons = {
0: {
icon: location.origin + '/mymap/images/mm_20_green.png'
},
1: {
icon: location.origin + '/mymap/images/mm_20_red.png'
}
};
function setMarkers(data) {
console.log('setMarkers');
console.log(data);
var markerJson = JSON.parse(data);
var pos;
var marker;
var icon;
for (var i = 0; i < allMarkers.length; i++) {
allMarkers[i].setMap(null);
};
allMarkers = [];
console.log(markerJson.length);
for (var i = 0; i < markerJson.length; i++) {
icon = customIcons[markerJson[i].stat] || {};
pos = new google.maps.LatLng(markerJson[i].lat, markerJson[i].lng);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Title',
icon: icon.icon
});
allMarkers.push(marker);
console.log(allMarkers);
}
}
function fetchMarkers() {
console.log('fetchMarkers');
$.ajax({
type: "GET",
url: "jsonResponse.php",
success: function(data) {
setMarkers(data);
setTimeout(function(){
fetchMarkers();
}, 3000);
}
});
}
function initialize() {
console.log('initialize');
// Get center
var mapOptions = {
zoom: 14,
//mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: false,
streetViewControl: false,
mapTypeControl: false
};
// Load google map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
}
fetchMarkers();
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</body>
</html>
jsonResponse.php：
<?php
require("config.php");
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Opens a connection to a MySQL server
$connection=mysql_connect (DB_SERVER, DB_USER, DB_PASSWORD);
if (!$connection) { die('Not connected : ' . mysql_error());}
// Set the active MySQL database
$db_selected = mysql_select_db(DB_DATABASE, $connection);
if (!$db_selected) {
die ('Can''t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM sensors WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
$markersArray = array();
while ($row = @mysql_fetch_assoc($result)){
array_push($markersArray, $row);
}
echo json_encode ($markersArray);
我很确定图标图像在正确的位置。我只是复制并粘贴到服务器，因此文件结构完全相同。
有人对我该怎么办有任何想法吗？我开始认为这与服务器配置有关...
您可能遇到
以下行的问题：
icon = customIcons[markerJson[i].stat] || {};
markerJson[i]是从服务器获取的项，根据您的代码，stat应为 0 或 1。
如果不是，您将获得一个空对象，这意味着您将无法获取空对象的 icon 属性。