如何在一个页面上显示多个不同的 MapQuest 传单地图？

Question

我正在从数据库中提取动态数据，以便在一个页面上显示不同城市和州的不同地图。

问题是，使用我的代码，只有一张 地图可以正确显示。

所有其他的都像这个一样显示为灰色:

如何在一页上显示多个MapQuest leaflet maps？有没有更有效的方法来做到这一点？

下面是我的代码：

//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=***

如果你 fork 这个代码笔：

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

并在 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>';
}

如何在一个页面上显示多个不同的 MapQuest 传单地图？

How to display multiple different MapQuest leaflet maps on one single page?

javascript

php

mapquest

leaflet