javascript 把多个标记到谷歌Map,可能是什么问题?[关闭]

7gyucuyw  于 2023-04-04  发布在  Java
关注(0)|答案(1)|浏览(114)

**已关闭。**此问题不符合Stack Overflow guidelines。当前不接受答案。

这个问题似乎与help center中定义的范围内的编程无关。
2天前关闭。
Improve this question
我试图显示标记为每个地址我在我的数据库.我存储在javascript数组的地址,和地理编码,显示在Map上的标记为每个人.地址被存储在数组中,但不幸的是只有最后一个地址得到一个标记在Map上.

<script>
var addresses = [];
        <?php
            if(is_array($fetchData)){      
            $sn=1;
            foreach($fetchData as $data){
        
            $post = $data['post'];
            $city = $data['city'];
            $street = $data['street'];
            $number = $data['number'];
                            
        ?>
    var address = '<?php echo $data['post'] . ' ' . $data['city'] . ' ' . $data['street'] . ' ' . $data['number']; ?>';
      
    
    addresses.push(address);

    var geocoder;
      var map;
      
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          
        });
        var i = 0;
        geocoder[i] = new google.maps.Geocoder();
        codeAddress(geocoder, map);
      }

      function codeAddress(geocoder, map) {
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location
              
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
      
      i++;
   
<?php
    $sn++;}}else{ ?>
<?php
}?>
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap">
    </script>

我在考虑索引'地理编码器'和做'i++;',但它还没有工作。

ih99xse1

ih99xse11#

通常情况下,你会运行db查询并将PHP结果转换为可以在Javascript中处理的变量。JSON非常适合此目的-易于在PHP中生成,并且易于在Javascript中处理。
你可能会考虑像这样的方法,未经测试的例子:

<script>
    <?php
        
        // convert db results array into JSON and echo as a js variable.
        printf('const addresses=%s;', json_encode( is_array( $fetchData ) ? $fetchData : [] ) );
                 
    ?>
    /*
        create the map and declare once the geocoder etc
    */
    function initMap() {
        let map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8
        });
        let geocoder = new google.maps.Geocoder();
        let codeAddress=( address )=>{
            geocoder.geocode({'address': address }, function(results, status) {
                if (status === 'OK') {
                    map.setCenter( results[0].geometry.location );
                    let marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });     
        };
        /*
            iterate through the JSON data to call the geocoder function for each result
        */
        Object.keys( addresses ).forEach(key=>{
            let obj=addresses[ key ];
            let address=`${obj.post} ${obj.city} ${obj.street} ${obj.number}`;
            
            codeAddress.call( this, address );
        });
    }
</script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap"></script>

相关问题