从数据库访问Google Map Marker时不起作用

Question

我开始学习Google地图。 奇怪的是，当静态声明标记时，这些标记可以工作并显示，但是当它们来自数据库时，它们并未在地图上绘制。

// 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/ （感谢您使我领会这一点的那个）

Answer 1

可能与您访问由ajax渲染的json的方式有关

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

或json内容

Answer 2

我不知道如何结束这个问题，因为我忽略了数据库上的一些问题，但是如果有人可能遇到相同的问题，我将发布答案（嗯，我不确定那是什么）

我从AJAX获得了DB中值的相同响应，但无法在MAP上绘制标记，我发现db->table->fields LAT LNG的数据类型为DECIMAL (7,5)并已更改关于此GOOGLE MAP教程中的内容-将PHP / MySQL与Google Maps一起使用 FLOAT (10, 6)将其FLOAT (10, 6) 。

之前的问题是较高的值倾向于保存为99.999999而不是实际值（例如120.XXXXX）。

从数据库访问Google Map Marker时不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-07-24 07:01:43

解决方案2
1 2016-07-24 07:42:09

从数据库访问Google Map Marker时不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-07-24 07:01:43

解决方案2 1 2016-07-24 07:42:09

解决方案1
1 已采纳 2016-07-24 07:01:43

解决方案2
1 2016-07-24 07:42:09