【问题标题】:Google Maps Markers not showing in IE谷歌地图标记未在 IE 中显示
【发布时间】:2016-09-26 19:10:54
【问题描述】:

您好,我正在尝试使用 Google Maps API 制作网站并从 MySQL db 获取坐标。到目前为止一切顺利,但仅在 Chrome 或 Safari 中标记不会在 Internet Explorer 中显示。我可以使用一些帮助。我遵循了 Google https://developers.google.com/maps/articles/phpsqlajax_v3 的这份指南 无论如何,这是我的代码。任何帮助将不胜感激,谢谢。

var customIcons = {
  sport: {
    icon: 'images/markers/sport.png',
  },
  bar: {
    icon: 'images/markers/bar.png',
  },
  poi: {
    icon: 'images/markers/poi.png',
  },
  skola: {
    icon: 'images/markers/skola.png',
  },
  kino: {
    icon: 'images/markers/kino.png',
  },
  divadlo: {
    icon: 'images/markers/divadlo.png',
  }
};

function nactimapu() {
  var map = new google.maps.Map(document.getElementById("mapa"), {
    center: new google.maps.LatLng(49.068299, 17.460907),
    zoom: 15,
    mapTypeId: 'hybrid'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("querymapa.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var nazev = markers[i].getAttribute("nazev");
      var popis = markers[i].getAttribute("popis");
      var typ = markers[i].getAttribute("typ");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + nazev + "</b> <br/>" + popis;
      var icon = customIcons[typ] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        animation: google.maps.Animation.DROP,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

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() {}

这里是php中的xml输出,可能有错误。很抱歉我没有早点发布。

<?php  

require("dbconfig.php"); 

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
return $xmlStr; 
} 

// Opens a connection to a MySQL server
$connection=mysql_connect ($dbserver, $dbuser, $dbheslo);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($dbname, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM lokace WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'nazev="' . parseToXML($row['nazev']) . '" ';
  echo 'popis="' . parseToXML($row['popis']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'typ="' . $row['typ'] . '" ';
  echo '/>';


// End XML file
echo '</markers>';

?>

【问题讨论】:

  • 您发现 IE 和地图标记之间的问题了吗?我有同样的问题..

标签: javascript ajax google-maps


【解决方案1】:

您的数组中有多余的逗号:

sport: {
     icon: 'images/markers/sport.png',  <-- Right here (among other places)
  }

Internet Explorer 不喜欢这样,而其他浏览器则不介意。您可以安全地删除它们。

【讨论】:

    【解决方案2】:
      sport: {icon: 'images/markers/sport.png',},
    

    Explorer 期望(其他浏览器忽略这一点)您向其中添加另一个命令,例如纬度或经度坐标以及标记中指定的其他项目。去掉右括号前的逗号就可以了

    例如,我在下面贴了一个我自己工作的标记,所以你可以看到,当我关闭括号时,我不再使用逗号了

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.latitude, data.longitude),
        map: yay,
        title: title,
        icon: icon
    });  
    

    【讨论】:

    • 您是否尝试过定义一个标准图标来测试它是否在该代码中?在您的标记语句中进行正常引用,让它从 googlemaps 标准创建一个正常标记...如果显示,您至少知道您会将其范围缩小到您的 costumicon 语句),如果没有,那么您的问题会更深。我从那个旧项目中提取了我自己的代码,但我没有在您的代码中看到其他错误。
    • 我在资源管理器中的站点上确实收到了错误消息。它在您的 gmapa.js 文件中的第 23 行。它说 documentElement 是空的或者不是一个对象。可能是这样,但我不能那样查看您的文件,除非它是上面的文件,否则就是它所在的这一行。 var map = new google.maps.Map(document.getElementById("mapa"), {' 基本上它说 mapa 没有定义。
    猜你喜欢
    • 2020-06-08
    • 2014-05-17
    • 2013-05-18
    • 2011-10-18
    • 2021-07-07
    • 2015-01-25
    • 2013-07-05
    相关资源
    最近更新 更多