标记在 Google Maps API 中不起作用答案

【问题标题】：Markers not working in Google Maps API标记在 Google Maps API 中不起作用
【发布时间】：2017-12-21 21:33:40
【问题描述】：

我是 Google Maps API 的新手。我编写了一个程序，它将根据 where.js 中给出的纬度和经度在所有点上放置标记。它加载地图，但没有放置任何标记。我不明白我做错了什么。

HTML代码如下-

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Markets of Kolkata</title>
<link href="http://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">

<script src="http://maps.google.cn/maps/api/js" type="text/javascript"></script> -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="where.js"></script>
  <script>

  function initialize() {
    //alert("To see the title of a marker, hover over the marker but don't click.");
    var myLatlng = new google.maps.LatLng(22.39961,88.101350)
    var mapOptions = {
      zoom: 3,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    i = 0;
    var markers = [];
    for ( pos in myData ) {
        i = i + 1;
        var row = myData[pos];
        window.console && console.log(row);
        // if ( i < 3 ) { alert(row); }
        var newLatlng = new google.maps.LatLng(row[0], row[1]);
        var marker = new google.maps.Marker({
            position: newLatlng,
            map: map,
            title: row[3]
        });
        markers.push(marker);
    }
  }
</script>

</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 600px"></div>
<p>
<b>Developed By </b> 
<a href="http://www.linkedin.com/in/arnab-chakravarty-8a329111b?
trk=nav_responsive_tab_profile"><b>Arnab Chakravarty</b></a>.
</p>
</body>
</html>

这里是 'where.js' 的 Javascript 文件-

myData = [
[22.5193768,88.3656851, 'K.M.C. Market, 3rd Floor Market Complex, 212, Rash Behari Avenue Road, Hindustan Park, Gariahat, Kolkata, West Bengal 700019, India','COLLEGE STREET MARKET(SPORTS GOOD)'],
[22.4977887,88.3796042, 'Garfa Main Rd, Kolkata, West Bengal 700075, India','COLLEGE STREET MARKET'],
[22.5048463,88.3882325, 'Purbachal Main Rd, Ramlal Bazar, Haltu, Kolkata, West Bengal 700078, India','COLLEGE STREET MARKET'],
[22.5867867,88.3564619, 'Kolkata, West Bengal 700073, India', 'BAITHAK KHANA PAPER MARKET'],
[22.5867867,88.3564619, 'Kolkata, West Bengal 700073, India', 'SAKUNTALA PARK VEGETABLE MARKET'],
[22.5867867,88.3564619, 'Kolkata, West Bengal 700073, India', 'SANTOSHPUR MUNICIPAL MARKET']];

【问题讨论】：

如何调用initialize函数？您的浏览器 developer 工具控制台中是否出现任何错误？带有 id 的 div 在哪里？您的一些代码有效 - jsfiddle.net/Luwpmunp - 但有错误
这里是完整的 HTML 代码。@JaromandaX
是的，仍然是 http://google-maps-utility-library-v3.googlecode.com 404 错误 - 所以，对你的其余代码不太信任

标签： javascript html google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

Javascript 数组是零索引的。您的代码将它们称为单索引。

即你的代码：

i = 0;
var markers = [];
for ( pos in myData ) {
    i = i + 1;
    var row = myData[pos];
    ...
}

您指的是myData[1]（第 2 项）、myData[2]（第 3 项）等，直至并包括 myData[6]。这将是您的标记数组中的第 7 个项目，但您只有 6 个项目。所以你可能会遇到一个 JS 错误（检查你的控制台），从而阻止标记加载。

只需将i = i + 1; 行放在循环的结束。或者更改循环样式，例如

for (var pos = 0; pos < myData.length; pos++) {
    var row = myData[pos];
    window.console && console.log(row);
    var newLatlng = new google.maps.LatLng(row[0], row[1]);
    var marker = new google.maps.Marker({
        position: newLatlng,
        map: map,
        title: row[3]
    });
    markers.push(marker);
}

【讨论】：

事实上你真的把myData当作一个对象，而它实际上是一个二维数组
将i = i + 1; 放在行尾工作并放置标记。但是当我将鼠标悬停在标记上时，标记的标题没有显示。
@ArnabC 将 title: row[3] 更改为 title: row[2]
但我希望第四项是标记的标题。为什么不将 row[3] 作为标记？
没关系。解决了。谢谢你的帮助邓肯。

【解决方案2】：

更正这一行： // 在 for 循环中添加这一行：
标记.setMap（地图）；标记.push(标记);

还要检查这个链接：它没有打开 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js

如果有任何错误，请检查 console.log：很高兴为您提供帮助

【讨论】：