Question

我有一个模式中的地图，我想显示由点击事件激活的每个产品的位置地图（注意我的位置是邮政编码）：

模态

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="modal-close">x</span>
        <div id="map_canvas"></div>
    </div>
</div>

产品

if (Model.locationsExist > 1)
{
    <div class="maplink">See @Model.locationsExist locations on map</div>
}
else
{
    <div class="maplink">See on map</div>
}
@Html.HiddenFor(x => x.locationString, new { @class = "locstring" })

Map Globals

var map;
var elevator;
var myOptions = {
    zoom: 5,
    center: new google.maps.LatLng(53.90, -3.00),
    mapTypeId: 'roadmap'
};

var addresses;
var gmarkers = [];

地图创建 - 我有一个函数可以迭代一组邮政编码并将它们添加到地图中......也可以添加到全局数组中，以便我可以稍后按this post

删除它们

function loadmap(locs){           

    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    addresses = locs.split('|');

        for (var x = 0; x < addresses.length; x++) {
            var marker = $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                new google.maps.Marker({
                    position: latlng,
                    map: map
                });

            });

            gmarkers.push(marker);                
        }

        addresses = [];
    };

function removeMarkers() {
    for (i = 0; i < gmarkers.length; i++) {
            gmarkers[i].setMap(null);
        }
    };

打开和关闭地图 - 我在产品缩略图中单击链接时显示模态。这将运行创建代码。当我点击关闭链接时，应该删除引脚。如果单击另一个地图链接，则会添加新引脚。

$(document).on('click', '.maplink', function () {
        loadmap($(this).siblings('.locstring').val());
        $('#myModal').css("display", "block");
    });

$(document).on('click', '.modal-close', function () {
        $('#myModal').css("display", "none");
        removeMarkers();
    });

我第一次点击模态显示并且地图很好。有用。我关闭，然后点击另一个链接，地图似乎错了：

我查看了很多帖子，这是我尝试的第5个版本。有没有人有这个呢？

Answer 1

我遇到了bootstrap模式的问题，当地图以模态或之前显示时，您必须触发Google Map调整大小事件。

在Bootstrap中就像：

$_POST

触发调整大小事件后，谷歌地图会丢失他的初始设置，如Zoomlevel或center，所以你应该恢复或启动谷歌地图，然后再显示它们。

请参阅Embedding Google Maps as CSS Overlay doesn't load properly

问题是将google地图设置为display：none。如果使用不透明度，这可以比触发resize事件更容易解决您的问题。 ; - ）

Answer 2

在尝试使用frankhammer建议时，我找到了问题的答案。

我只是改变了显示模态的顺序：

$(document).on('click', '.maplink', function () {                
        $('#myModal').css("display", "block");
        loadmap($(this).siblings('.locstring').val());
    });

这意味着我可以完全取消删除密码。

所以我的代码最终看起来像这样：

var map;
var elevator;
var myOptions = {
    zoom: 5,
    center: new google.maps.LatLng(53.90, -3.00),
    mapTypeId: 'roadmap'
};

var addresses;

$(document).ready(function () {
    $(document).on('click', '.maplink', function () {                
        $('#myModal').css("display", "block");
        loadmap($(this).siblings('.locstring').val());
    });

    $(document).on('click', '.modal-close', function () {
        $('#myModal').css("display", "none");
    }); 
}

function loadmap(locs) {

    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    addresses = locs.split('|');

    for (var x = 0; x < addresses.length; x++) {
        var marker = $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
        var p = data.results[0].geometry.location
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        new google.maps.Marker({
            position: latlng,
            map: map
        });

    });               
}
    addresses = [];
};

在模态中重新使用Google地图实例

2 个答案: