javascript - Google map API - 标记未显示

标签 javascript php google-maps google-maps-api-3

我正在尝试为页面上表格中的每一行添加标记。页面是http://www.sravanks.com/first/2013ftcmap.php

这是加载标记的 JS 代码:

$(document).ready(function() {
var mapOptions = {
  center: new google.maps.LatLng(39.740, -89.503),
  zoom: 7
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var infowindow = new google.maps.InfoWindow();

/* City Markers */
var cityCircle = new Array();
var i = 0;
$.each($('.events tr'), function(index, value) {
    var name = $(this).find('td:first()').html();
    var address = $(this).find('.address').html();
    var linkUrl = "http://www.sravanks.com/first/geocode.php?address=" + address;

    $.ajax({
        url: linkUrl
    }).done(function(data){
        var json = $.parseJSON(data.substring(0, data.length-1));

        lat = json.results[0].geometry.location.lat;
        lng = json.results[0].geometry.location.lng;
        var latlng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({ position: latlng, map: map, icon: 'map-pointer-medium.gif' });
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(name);
            infowindow.open(map, marker);
            cityCircle[i] = new google.maps.Circle({strokeColor: '#00FF00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#00FF00', fillOpacity: 0.35, map: map, center: latlng, radius: 144841});
                           i++;
        });

    });
});

/*Team Markers*/
var markers = {};
var teamName, teamNumber, lat, lng, content;
$.each($('.list tr'), function(index, value) {
    teamName = $(this).find('td.name').html();
    teamNumber = $(this).find('td.number').html();

    markers[teamNumber] = {};

    lat = parseFloat($(this).find('td.lat').html());
    lng = parseFloat($(this).find('td.lng').html());

    content = "Name: " + teamName + "<br />Number: " + teamNumber;
    markers[teamNumber]['latlng'] = new google.maps.LatLng(lat, lng);
    markers[teamNumber]['marker'] = new google.maps.Marker({ position: markers[teamNumber]['latlng'], map: map });
    google.maps.event.addListener(markers[teamNumber]['marker'], 'click', function() {
        infowindow.setContent(content);
        infowindow.open(map, markers[teamNumber]['marker']);
    });
});

google.maps.event.addListener(infowindow, 'closeclick', function() {
                      for(var i=0;i<cityCircle.length;i++){
                            cityCircle[i].setMap(null);
                       }
});
});

我没有错误,但团队标记没有显示。奇怪的是,城市标记确实出现了。

更多信息,城市标记 ajax 调用仅针对调用 google 地理编码 API 的代理。链接再次位于 http://www.sravanks.com/first/2013ftcmap.php

最佳答案

您的团队标记确实出现了,但它们都位于土耳其或格鲁吉亚的某个地方,因为团队数据表的纬度/经度有错误:

<tr>
<td class="number">111</td>
<td class="name">MiniStang</td>
<td class="address">Schaumburg, IL 60196 USA</td>
<td class="lat">42.070247650146</td>
<td class="lng">42.070247650146</td>
</tr>

记下纬度和经度值。他们有相同的号码。经度应该类似于 -87.62806429999999。所以你必须修复你的表生成器。

关于javascript - Google map API - 标记未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24113241/

相关文章:

javascript - Backbone 101 - 在主干中使用 JSON 数据

javascript - 使用 jquery-slim 包找不到 jQuery 模块?

php - 我在哪里可以找到symfony 2的捆绑/插件

php - 使用 PHP 将知名文本 (WKT) 从 MySQL 转换为 Google Maps 多边形

javascript - 将谷歌地图 Logo 移至底部自定义界面上方。 JavaScript

javascript - Google map 库 404

javascript - 将分块文件直接上传到 Amazon s3

javascript - 使 gs 文件既作为应用程序脚本文件又作为客户端 js 文件

php - Laravel 电子邮件验证一键禁用和启用

php - 上传后调整图像大小!