谷歌地图标记不显示 JavaScript

Question

var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: 'pointer.png',
    title: "test"
});

我的地图加载器完美，但我的标记不会出现。

我不太明白为什么会这样？

编辑 1：

这是整个函数，我希望它能帮助回答你的一些问题：

 function initMap() {
     map = new google.maps.Map(document.getElementById('map'), {
         zoom: 16,
         center: new google.maps.LatLng(<?php echo $userRow['latitude']; ?>, <?php echo $userRow['longitude']; ?>),
     });
     var infoWindow = new google.maps.InfoWindow;

     // Change this depending on the name of your PHP or XML file
     downloadUrl('http://xxx.esy.es/test/test-marker.php', function(data) {
         var xml = data.responseXML;
         var markers = xml.documentElement.getElementsByTagName('marker');
         Array.prototype.forEach.call(markers, function(markerElem) {
             var name = markerElem.getAttribute('username');
             var address = markerElem.getAttribute('address');
             var point = new google.maps.LatLng(
                 parseFloat(markerElem.getAttribute('latitude')),
                 parseFloat(markerElem.getAttribute('longitude')));

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

             var text = document.createElement('text');
             text.textContent = address
             infowincontent.appendChild(text);
             var marker = new google.maps.Marker({
                 map: map,
                 position: point,
                 icon: 'pointer.png',
                 title: "test"
             });
             marker.addListener('click', function() {
                 infoWindow.setContent(infowincontent);
                 infoWindow.open(map, marker);
             });
         });
     });
 }

编辑 2

这是我的 xml 代码，它工作正常！只是我在地图上的标记不起作用

<?php
include_once 'test-dbconnect.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;
}


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

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

 $sql = "select * from tbl_users";
    $result = mysqli_query($DBcon, $sql) or die("Error in Selecting " . mysqli_error($DBcon));

    //create an array
    $emparray = array();
    while($row =mysqli_fetch_assoc($result))
    {
        $emparray[] = $row;

  echo '<marker ';
  echo 'name="' . parseToXML($row['username']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['latitude'] . '" ';
  echo 'lng="' . $row['longitude'] . '" ';
  echo '/>';
}


    //close the db connection
    mysqli_close($DBcon);

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

?>

Answer 1

在您的 XML 中：

<marker name="test" address="sømærket 3 hørsholm" lat="55.880875" lng="12.448797"/>

在你的 JS 中：

markerElem.getAttribute('latitude')

您正在使用lat 和latitude、lng 和longitude、name 和username。所以请确保使用正确的属性！

---

您可以通过在您的 JS 中使用这个简单的行来轻松地调试您的代码：

console.log(markerElem.getAttribute('latitude'));

并查看您的 javascript 控制台（在 Chrome 或 Firefox 等体面的浏览器中）。如果您不知道它在哪里，请查看您的浏览器文档。

Answer 2

检查“地图”是否在范围内。

另外，将此代码代码保留在地图的空闲事件中：

var marker = null;
google.maps.event.addListener(map, 'idle', function() {


   marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: 'pointer.png',
        title: "test"
   });
});

Answer 3

试试这个：

调用你的 div

<div id="map_canvas" style="height: 520px; border: 1; border-color: #000;" class="centered"></
<!-- This is the div that will contain the Google Map -->

在脚本中：

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

并把你的标记属性和图标，用 JSON 试试吧：

 $.each(data, function (i, item) {
            var marker = new google.maps.Marker({
                'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                'map': map,
                'title': item.PlaceName
            });

            // Set Icon

            marker.setIcon('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png')

            // put in some information about each json object - in this case, the opening hours.
            var infowindow = new google.maps.InfoWindow({
                content: "<div class='infoDiv'>\n\<h2 class='text-center'>" + item.PlaceName + "</h2></div></div>"
            });

            // finally hook up an "OnClick" listener to the map so it pops up out info-window when the marker-pin is clicked!
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });

        })