Question

我无法弄清楚这里发生了什么。航点是来自我的数据库的数据，当我查看页面源时，正确的数据似乎填充了javascript变量。地图位于我希望它居中的正确区域，但标记不会显示。我不明白的部分是，如果我将waypoint.x / waypoint.y变量作为MAP居中坐标，它将仅显示为标记，但地图本身不会显示。

我做错了什么？我没有收到任何控制台错误或任何可以解决的问题。我有初始化（）函数。

脚本：

<script>
var map, waypointByID = {};

function initialize() {
    var map = {};

    {% for waypoint in waypoints %}

    var mapOptions = {
        zoom: 11,
        center: new google.maps.LatLng(40.7484, -73.9857),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    waypointByID[{{waypoint.id}}] = {
        name: "{{waypoint.name}}",
        lat: {{waypoint.geometry.y}},
        lng: {{waypoint.geometry.x}}
    };

    var marker = new google.maps.Marker({
        map: map, 
        position: new google.maps.LatLng(
            {{waypoint.geometry.y}}, 
            {{waypoint.geometry.x}}
        ),
        title: '{{waypoint.name}}', 
        visible: true
    });

    {% endfor %}

}

</script>

视图输出 - ＆gt;页面来源：

var map, waypointByID = {};

function initialize() {
var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(40.7484, -73.9857),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);



waypointByID[294] = {
    name: "Holy Apostles Soup Kitchen",
    lat: -73.998837,
    lng: 40.7493372
};

var marker = new google.maps.Marker({
    map: map, 
    position: new google.maps.LatLng(
        -73.998837, 
        40.7493372
    ),
    title: 'Holy Apostles Soup Kitchen', 
    visible: true
});

}

Answer 1

目前，您正在为每个航路点创建一个新地图。

尝试在waypoints循环上方移动地图声明：

function initialize() {
    var mapOptions = {
        zoom: 11,
        center: new google.maps.LatLng(40.7484, -73.9857),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    {% for waypoint in waypoints %}

    waypointByID[{{waypoint.id}}] = {
        name: "{{waypoint.name}}",
        lat: {{waypoint.geometry.y}},
        lng: {{waypoint.geometry.x}}
    };

    var marker = new google.maps.Marker({
        map: map, 
        position: new google.maps.LatLng(
            {{waypoint.geometry.y}}, 
            {{waypoint.geometry.x}}
        ),
        title: '{{waypoint.name}}', 
        visible: true
    });

    {% endfor %}
}
google.maps.event.addDomListener(window, 'load', initialize);

谷歌地图标记或地图将显示，但不是两者都显示？

1 个答案: