如何在一個頁面上顯示多個不同的 MapQuest 傳單地圖？

Question

我正在從數據庫中提取動態數據，以在一個頁面上顯示具有不同城市和州的不同地圖。

問題是我的代碼只能正確顯示一張地圖。

所有其他的都像這樣顯示為灰色：

如何在一頁上顯示多個MapQuest 傳單地圖？ 有沒有更有效的方法來做到這一點？

這是我的代碼如下：

//set var   
$x =0;  

while($map = $result_data->fetch_assoc()){$x++;

//construct the mapid for mapquest
$mapid = 'map'.$x;

//get city 
$city = $map['city'];

//get state
$state = $map['state'];

echo "<script>
L.mapquest.key = 'my_key';
var $mapid = L.mapquest.map('$mapid', {
center: [0, 0],
layers: L.mapquest.tileLayer('map'),
zoom: 14
});
L.mapquest.geocoding().geocode('$city, $state');
</script>";

echo '<div id="map'.$x.'" style="width: 100%; height: 200px;"></div>';

}

Answer 1

我以這種方式使用 mapquest 地理編碼在 javascript 中創建了三個傳單地圖：

window.onload = function() {
    var mapLayer = MQ.mapLayer(), map;
        map = L.map('map', {
        layers: mapLayer,
        center: [ 40.731701, -73.993411 ],
        zoom: 12
    }); 
    searchForPosition('Barcelona, Spain', map);

    mapLayer = MQ.mapLayer(), map2;
        map2 = L.map('map2', {
        layers: mapLayer,
        center: [ 40.731701, -73.993411 ],
        zoom: 12
    });
    searchForPosition('London, UK', map2);

    mapLayer = MQ.mapLayer(), map3;
        map3 = L.map('map3', {
        layers: mapLayer,
        center: [ 40.731701, -73.993411 ],
        zoom: 12
    });
    searchForPosition('New York, USA', map3);
}

function searchForPosition(query, map) {
  MQ.geocode({ map: map, mapFitBounds: true })
      .search(query)
      .on('success', (result) => {
      const position = result.data.results[0].locations[0].displayLatLng;
      console.log(position)
      map.panTo(new L.LatLng(position.lat, position.lng));
    });
}

我使用這個css：

https://unpkg.com/leaflet@1.6.0/dist/leaflet.css

和這個js：

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js

https://open.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=***

https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-geocoding.js?key=***

如果你分叉這個代碼筆：

https://codepen.io/jeprubio/pen/QWwdexq

並在Settings / Javascript部分Settings / Javascript api 鍵，您可以看到它正在工作。

您可以調整它以從代碼中寫入坐標。 在您的代碼中，它應該是這樣的：

echo "<script>
function searchForPosition(query, map) {
  MQ.geocode({ map: map, mapFitBounds: true })
      .search(query)
      .on('success', (result) => {
      const position = result.data.results[0].locations[0].displayLatLng;
      map.panTo(new L.LatLng(position.lat, position.lng));
    });
}
</script>";

//set var   
$x = 0;  

while ($map = $result_data->fetch_assoc()) {
   $x++;

   //construct the mapid for mapquest
   $mapid = 'map'.$x;

   //get city 
   $city = $map['city'];

   //get state
   $state = $map['state'];

   echo "<script>
   mapLayer = MQ.mapLayer(), $mapid;
     $mapid = L.map('$mapid', {
     layers: mapLayer,
     center: [ 40.731701, -73.993411 ],
     zoom: 12
   }); 
   searchForPosition('$city, $state', map3);
   </script>";

   echo '<div id="'.$mapid.'" style="width: 100%; height: 200px;"></div>';
}