javascript - 多个 Google map ，其中一张 map 未加载

Question

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

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

这是我的 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());
    });


}

在我的第一个 View 中

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

和其他 View

<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 不存在，因此永远不会到达下一行。如果您将其注释掉，那么第二个 View 将按预期工作。

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

顺便说一句:这也意味着 map_canvas1 在您的第一个 View 中也不存在，所以也要小心。

试试这个:

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);