Question

我正在MVC 5中实现一个系统，用户可以从谷歌地图中选择他们的坐标并保存它们，坐标存储到数据库中，然后应用程序中的单独页面检索坐标并显示带有该坐标的地图。标记显示。

我的问题是，当一张地图正常运作时，另一张地图不会显示在单独的页面上。

这是我的Javascript代码：

$(document).ready(function () {

    initialize();

});

function initialize() {

    var latlng = new google.maps.LatLng('@ViewBag.Latitude', '@ViewBag.Longitude');

    var myLatLng2 = new google.maps.LatLng(53.88484, -9.28484);

    var mapOptions = {
        center: latlng,
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var mapOptions2 = {
        zoom: 5,
        center: myLatLng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    var map2 = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions2);

    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: '@ViewBag.data'
    });

    var marker2 = new google.maps.Marker({
        map: map2,
        position: myLatLng2,
        draggable: true
    });

    new google.maps.event.addListener(marker2, 'drag', function () {
        var pos = marker2.getPosition();
        $("#Lat").val(pos.lat());
        $("#Lon").val(pos.lng());
    });


}

并在我的第一个视图中

  <div id="map_canvas" style="float:left; width: 600px; height: 250px; margin-top:15px; margin-bottom:20px; margin-left:30px;">

和其他视图

<div id="map_canvas1" style="float:left; width: 600px; height: 250px; margin-top:15px; margin-bottom:20px; margin-left:30px;">

我可以通过注释掉

来使“map2”工作

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

反之亦然，但它们似乎不会彼此并排，只有声明的第一个var map或var map2似乎在两个都未被注释时运行，任何帮助将不胜感激，感谢。

Answer 1

这是因为

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

最有可能犯错误。 map_canvas不存在，因此永远不会到达下一行。如果您将其注释掉，那么第二个视图将按预期工作。

调用document.getElementById()时，请确保在创建地图之前，该元素首先存在。

BTW：这也意味着你的第一个观点上也不存在map_canvas1，所以也要小心。

试试这个：

var map_canvas = document.getElementById("map_canvas");
if (map_canvas)
    var map = new google.maps.Map(map_canvas, mapOptions);
var map_canvas1 = document.getElementById("map_canvas1");
if (map_canvas1)
    var map2 = new google.maps.Map(map_canvas1, mapOptions2);

多个Google地图，一个地图未加载

1 个答案: