0

Google マップ API v3 を使用していますが、問題があります。

データベースから座標を取得し、それらを複数のマップで表示する必要がありますが、マップの数がわかりません。

ここにコードphpコード：

<div id="view-content">
            <?php foreach ($this->tag as $tag) : ?>

                <div id="list">
                    <div id="left">
                        <div id="map_canvas" style=" margin-left: 5px; width: 136px; height: 136px;"></div>
                    </div>
                    <div id="right">
                        <div id="listtitre">
                            <a href="<?php echo $this->url(array('action' => 'maptag', 'controller' => 'maptag', 'module' => 'agent', 'idtag' => $tag['idtag'])); ?>"> 
                                <?php echo $tag['name']; ?>
                            </a>
                        </div>
                        <div id="tagdisctitle">
                            <font>Address: </font><br/>
                            <font>Latitude: </font><br/>
                            <font>Longitude: </font><br/>
                        </div>
                        <div id="taglistdisc">
                            <?php
                            if (strlen($tag["address"]) > 52)
                                echo substr($tag["address"], 0, 52) . "...";
                            else
                                echo substr($tag["address"], 0, 52) . ".";
                            ?> <br/>
                            <?php echo $tag['latitude']; ?><br/>
                            <?php echo $tag['longitude']; ?><br/>
                        </div>
                    </div> 
                </div>
            <?php endforeach; ?>
        </div>

JS コード:

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(36.6464862, 9.9565553 ),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });

    var marker;
    function placeMarker(location) {
        if(marker){ //on vérifie si le marqueur existe
            marker.setPosition(location); //on change sa position
        }else{
            marker = new google.maps.Marker({ //on créé le marqueur
                position: location, 
                map: map,
                icon : "/images/mapgo.png"
            });
        }
        latitude.value=location.lat();
        longitude.value=location.lng();
    }

}

助けてくれてありがとう

4

1 に答える 1

3

ID はページ上で一意である必要があります。HTML をループで出力しているため、map_canvas div を含む重複した ID を作成しています。各繰り返しで一意の ID が作成されるように、HTML と JavaScript の両方を変更する必要があります。これを行う最も簡単な方法は、反復ごとにインクリメントする実行中のカウンターを保持し、このカウンターを ID に含めることです。

<div id="map_canvas<?=$counter?>"> [...] </div>

次に、これも使用するように JS を変更する必要があります。

于 2012-05-08T11:17:33.757 に答える