javascript/google 地图：为什么初始化地图的位置很重要（内部函数与外部函数）

Question

简短摘要：当我将我的地图声明从初始化标记的函数中移出并将它们放置在我的 google 地图上时，我的地图失败并且根本没有任何标记。为什么我在何处声明我的地图很重要？

更长的版本：我想编写一个通用函数，将两个数组中的所有纬度和经度放置到 google 地图上。我正在使用以下内容：

 var lat_array = <?php echo $slat.";"; ?>
 var lon_array = <?php echo $slon.";"; ?>
 var markers = []

 function init_map(map) {

     var myOptions = {
         zoom: 14,
         center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
         mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

     marker = new google.maps.Marker({
         map: map,
         position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
     });

     var bounds = new google.maps.LatLngBounds();
     var myLatLng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);

     bounds.extend(myLatLng);

     var pinColor = "009ACD";
     var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,


                                                new google.maps.Size(21, 34),
                                                new google.maps.Point(0,0),
                                                new google.maps.Point(10, 34));



     for(var ii =0; ii<lat_array.length; ii++)
     {
         marker2 = new google.maps.Marker({
             map: map,
             position: new google.maps.LatLng(lat_array[ii], lon_array[ii]),
             icon: pinImage
         });

         markers.push(marker2)
             myNewLatLng = new google.maps.LatLng(lat_array[ii], lon_array[ii]);
         bounds.extend(myNewLatLng);
     }
     map.fitBounds(bounds);

 }


 google.maps.event.addDomListener(window, 'load', init_map);

这很好用。现在我想通过在 init_map 之外声明地图并将其传递给 init_map 来修改函数以使其更通用，这样我就可以更轻松地在同一页面上制作许多不同的地图。但是，当我通过将地图声明移到函数外部来修改代码时，如下所示：

 var myOptions = {
             zoom: 14,
             center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };
         map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

     function init_map(map) {
                 marker = new google.maps.Marker({
             map: map,
             position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
         });
...

我的代码现在失败了。我在我的 JS 控制台中收到此错误，我不知道如何解释：

Uncaught InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

None 这些术语出现在我的代码中，所以我不知道如何解释它们。除了那个错误，现在我有一张没有图钉的地图。

将地图声明移出我的函数有什么问题？感谢您的任何建议。

Answer 1

    var myOptions = {
       zoom: 14,
       center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
       mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    function init_map(map) {
       marker = new google.maps.Marker({
         map: map,
         position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>)
    });

在第一个示例中，您正在制作选项和地图变量。但是，您正在破坏函数中的 map 参数，并将其替换为指向 map-canvas 元素的参数。

当您将该声明移出函数体时，您不再破坏 map 参数；您依赖它作为有效地图。

可能是

function init_map(map) {
   if (!map) {
     map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
   }
   ...

javascript/google 地图：为什么初始化地图的位置很重要（内部函数与外部函数）

javascript/google maps: Why does it matter where I initialize my map (inside vs outside function)

javascript

google-maps-api-3