Javascript 谷歌地图定制商没有'；不显示在我的服务器上，但在本地主机上工作_Javascript_Php_Google Maps

Javascript 谷歌地图定制商没有'；不显示在我的服务器上，但在本地主机上工作

javascript php google-maps

Javascript 谷歌地图定制商没有'；不显示在我的服务器上，但在本地主机上工作,javascript,php,google-maps,Javascript,Php,Google Maps,我正在尝试创建一个自定义地图，其中我将设置一些带有自定义图标的标记。图标通常出现在我的本地主机上，但当我将所有文件上传到我的服务器时，自定义图标不会出现！地图显示默认的GMap标记，证明我的数据库连接正常。下面是我的代码： index.php： <!DOCTYPE html> <html lang="en"> <head> <title>My map</title> <meta name="viewport" content="i

我正在尝试创建一个自定义地图，其中我将设置一些带有自定义图标的标记。图标通常出现在我的本地主机上，但当我将所有文件上传到我的服务器时，自定义图标不会出现！地图显示默认的GMap标记，证明我的数据库连接正常。下面是我的代码：

index.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>


我的地图
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var映射；
var-allMarkers=[]；
var customIcons={
0: {
图标：location.origin+'/mymap/images/mm_20_green.png'
},
1: {
图标：location.origin+“/mymap/images/mm_20_red.png”
}
};
函数设置标记（数据）{
log（'setMarkers'）；
控制台日志（数据）；
var markerJson=JSON.parse（数据）；
var-pos；
var标记；
var图标；
对于（var i=0；i


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属性
 @KimGysen GMap中的Deafolt标记已正确绘制在地图上，我只是无法在服务器上将其更改为我的自定义标记（localhost正常）。没有任何更改，@KimGysenStrange表示它在您的localhost上起作用。如果找不到图标，通常会在控制台中出现错误。如果在实例化时尝试将硬编码路径立即放入标记中会发生什么？哦！这样做，它的工作！奇怪…最奇怪的是，相同的代码可以在本地主机上运行，但不能在远程服务器上运行。。。我正在使用console.log（icon.icon）
和localhost上的icon.icon
正确打印图标链接进行调试，但在我的服务器上，它显示icon.icon
无法访问…这几乎就是问题所在。。。事实证明，并非所有内容都与我的本地主机相同。我在localhost数据库上更改了一个列名，但忘记在服务器上更改它。。。你的回答帮我弄明白了。非常感谢。