我开始学习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>


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

最佳答案

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

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


或json内容

10-06 07:41
查看更多