javascript - PHP 和 Javascript 问题 - SyntaxError：不能两次声明 const 变量：'map'

Question

我正在尝试使用 JSON 文件中的 long/lat 列表填充谷歌地图并遇到此问题，我们将不胜感激！

[错误] SyntaxError：不能两次声明 const 变量：'map'。

[错误] 未处理的 Promise Rejection: InvalidValueError: initMap is not a function

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
        <script
          src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap&libraries=&v=weekly"
          async
        ></script>
        <script>
        
            // Initialize and add the map
            function initMap() {
              // The location of Uluru
              const uluru = { lat: -25.344, lng: 131.036 };
              // The map, centered at Uluru
              const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 5,
                center: uluru,
              });
              // The marker, positioned at Uluru
              
              <?php
                $data = json_decode($eaterJSON,true);
                $data = array_values( array_unique( $data, SORT_REGULAR ) );
                $clean = json_encode($data);
                // print_r($clean);
              
                foreach($data as $key => $value) {
                ?>
                
                const map = new google.maps.Marker({
                    position: {lat: <?php echo $value['lat'] ?>, lng: <?php echo $value['lon'] ?>},
                    map: map,
                  });
                  
                  
                <?php
                }
                ?>
                
            }

    </script>

标签： javascriptphpgoogle-maps

Answer 1

您需要将第二个地图const 重命名为marker：

从：const map = new google.maps.Marker({ 到：const marker = new google.maps.Marker({

更新： 哦，等等！您使用 PHP 循环生成 JS 代码（标记），这会导致多个相同的变量名！请详细了解（多个）标记创建！

在这种情况下，您无需为变量分配标记，只需在循环中创建标记：

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap&libraries=&v=weekly"
      async
    ></script>
    <script>
    
        // Initialize and add the map
        function initMap() {
          // The location of Uluru
          const uluru = { lat: -25.344, lng: 131.036 };
          // The map, centered at Uluru
          const map = new google.maps.Map(document.getElementById("map"), {
            zoom: 5,
            center: uluru,
          });
          // The marker, positioned at Uluru
          
          <?php
            $data = json_decode($eaterJSON,true);
            $data = array_values( array_unique( $data, SORT_REGULAR ) );
            $clean = json_encode($data);
            // print_r($clean);
          
            foreach($data as $key => $value) {
            ?>
            
            new google.maps.Marker({
                position: {lat: <?php echo $value['lat'] ?>, lng: <?php echo $value['lon'] ?>},
                map: map,
              });
              
              
            <?php
            }
            ?>
            
        }

</script>