从数据库时谷歌地图标记不起作用答案

【问题标题】：Google Map Marker not working when from DB从数据库时谷歌地图标记不起作用
【发布时间】：2016-11-27 17:15:19
【问题描述】：

我开始学习谷歌地图。奇怪的是，当静态声明时，标记正在工作并被显示，但是当它们来自数据库时，它们并没有被绘制在地图上。

// var markers = [[15.054419, 120.664785, 'Device1'], [15.048203, 120.692186, 'Device 2'], [15.033303, 120.694611, 'Device 3']];
var markers = [];

我这里有完整的代码，也许我遗漏了什么？我什至使用了控制台日志，并且成功地将所有数据从 ajax 传递到 markers 变量。

我想我在 SO 的某个地方得到了这段代码，并对其进行了修改以适应我的数据库记录调用。我希望你能帮我解决这个问题。谢谢！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script type="text/javascript">
    var map;
    var global_markers = [];    
// var markers = [[15.054419, 120.664785, 'Device1'], [15.048203, 120.692186, 'Device 2'], [15.033303, 120.694611, 'Device 3']];
    var markers = [];

    var infowindow = new google.maps.InfoWindow({});

    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(15.058607, 120.660884);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        $.ajax({
            type: 'GET',
            url: 'control_panel/get_device_list_ajax',
            success: 
                function (data) {
                    data = JSON.parse(data);
                    if (data['success']){
                        var device = data['device_list'];
                        device.forEach(function (dev) {
                            markers.push([dev['dev_geolat'], dev['dev_geolng'], dev['dev_name']]);
                            //console.log(markers);
                        });
                        addMarker();
                    } else {

                    }
                }
        });
    }

    function addMarker() {
        console.log(markers);
        for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i][0]);
            var lng = parseFloat(markers[i][1]);
            var trailhead_name = markers[i][2];

            var myLatlng = new google.maps.LatLng(lat, lng);

            var contentString = "<html><body><div><p><h2>" + trailhead_name + "</h2></p></div></body></html>";

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: "Coordinates: " + lat + " , " + lng + " | Trailhead name: " + trailhead_name
            });

            marker['infowindow'] = contentString;

            global_markers[i] = marker;

            google.maps.event.addListener(global_markers[i], 'click', function() {
                infowindow.setContent(this['infowindow']);
                infowindow.open(map, this);
            });
        }
    }

    window.onload = initialize;
</script>

编辑这是我用来处理这个的 jsfiddle http://jsfiddle.net/kjy112/ZLuTg/ （感谢引导我这样做的那个）

【问题讨论】：

标签： javascript jquery ajax google-maps google-maps-api-3

【解决方案1】：

可能与您访问 ajax 呈现的 json 的方式有关

markers.push([dev.dev_geolat, dev.dev_geolng, dev.dev_name]);

或json内容

【讨论】：

感谢您的快速回复。但它具有相同的效果，我仍然得到与device_list 相同的console.log(markers);，但在谷歌地图上没有标记。
显示标记 json 结果的（短）样本
天啊！对不起。我刚刚发现，经过几个小时检查它们为什么不显示后，由于错误的表字段数据类型 (lat/lng)，我的 DB 值不正确。感谢您在发布问题之前检查了控制台日志上的结果并忽略了它们。再次感谢您的帮助。它现在可以工作了。
如果我的建议对您有用，请将答案标记为有用

【解决方案2】：

我不知道如何结束这个问题，因为我忽略了我的数据库上的一些问题，但如果有人遇到同样的问题，我会发布我的答案（好吧，我不确定呵呵）

我从 DB 中的值的 AJAX 得到相同的响应，但我无法在 MAP 上绘制标记，我发现 db->table->fields LAT LNG 被引用的数据类型为 DECIMAL (7,5) 并将其更改为 FLOAT (10, 6) 为在此GOOGLE MAP Tutorial - Using PHP/MySQL with Google Maps 中找到的内容。

之前字段的问题是较高的值往往被保存为 99.999999 而不是实际值（例如 120.XXXXX）。

【讨论】：