Question

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

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

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

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

<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>

修改以下是我曾经使用过这个http://jsfiddle.net/kjy112/ZLuTg/的jsfiddle（感谢那个引导我的人）

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 Tutorial - Using PHP/MySQL with Google Maps中的内容FLOAT (10, 6)。{/ 1>

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

Google地图标记在使用数据库时无法正常工作

2 个答案: