时间戳

首页 > 解决方案 > 在 codeigniter 中显示多个地图位置时出错

javascript - 在 codeigniter 中显示多个地图位置时出错

问题描述

我正在尝试使用数据库中的纬度和经度在谷歌地图中显示多个位置。

这是我的代码：

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script>
function initMap() 
{
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };
    map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
    map.setTilt(50);
    var markers = [['<?php echo $vendor_name; ?>', '<?php echo $vendor_latitude; ?>', '<?php echo $vendor_longitude; ?>']];
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<?php echo $vendor_name; ?>' + '</div>']];
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });   
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
        map.fitBounds(bounds);
    }
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });   
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<div id="mapCanvas" name="mapCanvas" style="width: 100%; height: 500px;"></div>

这张地图应该使用数据库中的纬度和经度来显示多家餐厅。但这里的问题是我只能显示最后添加到数据库中的餐厅。

有人可以帮我在地图上显示所有餐厅吗？

标签： javascriptcodeignitergoogle-maps

解决方案

在 initMap() 函数中，您可以首先将所有餐厅位置存储在一个数组中：

        ///populate this array with your list of restaurants
        ///sample content
        var vendorList = [
                ['vendor 1', '51.493225','-0.184325'],
                ['vendor 2', '51.498970','-0.186340'],
                ['vendor 3', '51.487782','-0.2027224']
        ];

然后遍历该列表以显示标记：

        ///loop through the declared array
        for( i = 0; i < vendorList.length; i++ ) { ..... }

查看这个从您给定的代码重新创建的工作小提琴，并为所有三个示例供应商位置显示 3 个标记。 带有 3 个标记的样本

希望这可以帮助！

推荐阅读