【问题标题】:Google Maps Escaped Characters Not Displayed Correctly &#39 - XML and JavascriptGoogle Maps 转义字符未正确显示 &#39 - XML 和 Javascript
【发布时间】:2018-08-29 12:25:23
【问题描述】:

这里完全被难住了。无法正确显示 '(撇号)... 使用来自 google Google Maps Tutorial 的教程从我的数据库创建地图。它连接到我的数据库,创建一个 XML 文件,然后引用该 XML 文件来创建地图。

以下代码是我创建 XML 的 PHP 文件。查看转义码。

<?php

// Escape Characters
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;
}


$servername = "localhost";
$username = "XXX";
$password = "XXX";
$dbname = "XXX";



// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 


// Select all the rows in the markers table
$sql = "
SELECT *
FROM table1
WHERE status = 'ACTIVE'";


$result = $conn->query($sql);
if (!$result) {
  die('Invalid query: ' . mysqli_error());
}

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

// Start XML file, echo parent node
echo "<?xml version='1.0' ?>";
echo '<markers>';
$ind=0;
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'fac_id="' . $row['fac_id'] . '" ';
  echo 'fac_name="' . parseToXML($row['fac_name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'region="' . $row['region'] . '" ';
  echo '/>';
  $ind = $ind + 1;
}

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

?>

这是上面创建的 XML 文件中的一行。撇号表示为 '

<marker fac_id="123" fac_name="St. Luke&#39;s MC" address="1800 East Van Buren Street" lat="33.451542" lng="-112.043129" region="West C"/>

以下是用于创建实际地图的 html 文件(由于我删除了个人数据而无法使用)。我真的没有javascript经验,所以我不确定为什么不解码撇号?

不正确显示撇号的屏幕截图: Google Map Screenshot

<!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>Using MySQL and PHP with Google Maps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        'East A': {
          label: 'A'
        },
        'West C': {
          label: 'C'
        },
        'North D': {
          label: 'D'
        },
	'East K': {
          label: 'K'
        },
	'North M': {
          label: 'M'
        },
	'South S': {
          label: 'S'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(35.845424, -93.738202),
          zoom: 4.75
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('http://example.com/xmlmaker.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var fac_id = markerElem.getAttribute('fac_id');
              var fac_name = markerElem.getAttribute('fac_name');
              var address = markerElem.getAttribute('address');
              var region = markerElem.getAttribute('region');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = fac_name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[region] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                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() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=ABC1234567890&callback=initMap">
    </script>
  </body>
</html>

【问题讨论】:

  • 为什么使用&amp;#39; 而不是&amp;apos;

标签: javascript html xml utf-8 apostrophe


【解决方案1】:

您的parseToXML($htmlStr) 函数正在从早期的替换中删除&amp;amp; 替换,因为在它将' 替换为&amp;#39; 之后,它会通过将&amp;amp; 替换为&amp;amp; 来破坏&amp;#39;

不必在所有上下文中替换所有这些字符。请参阅 Simplified XML Escaping,并优化您的 parseToXML() 函数以及相应地调用它的位置。

【讨论】:

  • 好的,所以我不能逃避 ' 和 " 和 & 和 > ??? 我可以同时删除 parseToXML 的两个实例吗?抱歉,这方面不熟悉,但非常需要为此使用谷歌地图任务。非常感谢!
  • 您没有正确总结规则。我不能比我做的更简单here
  • 我看到了你的链接帖子,但我仍然对如何更改我的原始代码感到困惑。你能提供一个你会改变的例子吗?我不想让你为我做这项工作,但我不确定如何进行。谢谢!
  • 相反,这正是您的评论表明您确实想要的。 我已经回答了你的问题,但不会为你做你的工作。祝你好运。
  • 对不起。当然不是因为懒惰,我只是在主题领域没有经验。我想我明白在大多数情况下,只有 developers.google.com/maps/documentation/javascript/…
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-08
  • 1970-01-01
相关资源
最近更新 更多