Question

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

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

 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来修改函数以使其更通用，这样我就可以更容易地在同一页面上制作许多不同的地图。但是，当我通过在函数外移动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

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

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

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 maps：为什么我初始化地图（内部与外部功能）的关系很重要

1 个答案: