Используйте API Mapquest в DIV внутри HTML DIV - PullRequest
Новая
       27

Используйте API Mapquest в DIV внутри HTML DIV

0 голосов
/ 28 августа 2018

Я новичок в mapquest, я хочу создать веб-страницу, где мы можем увидеть карту. Мой пример хорошо работает, если я использую один «div», но если я использую «div» внутри «div», карты не загружаются полностью.

рабочий образец: 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> Hello World!</title>
    <style type="text/css">
        #mapa{ width: 800px; height: 600px;font-family:Arial }
    </style>


</head>
<body >
<div id="mapa"></div>


<script type="text/javascript">

L.mapquest.key = 'KEY'; 

map= L.mapquest.map( 'mapa' , {
center: [38.58778619815616,-9.041748046875],
layers: L.mapquest.tileLayer('hybrid'),
zoom: 18

}); 

    L.marker([38.58778619815616,-9.041748046875], {
      icon: L.mapquest.icons.marker(),
      draggable: false
    }).bindPopup('Denver, CO').addTo(map);

    L.circle([38.8339, -104.8214], { radius: 20000 }).addTo(map);

    var denverLatLngs = [
      [36.99, -102.05],
      [37, -109.05],
      [41, -109.05],
      [41, -102.05]
    ];

    L.polygon(denverLatLngs, {color: 'red'}).addTo(map);

</script>
</body>

И я хочу поместить его в контейнер: 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> Hello World!</title>
    <style type="text/css">
        #mapa{ width: 800px; height: 600px;font-family:Arial }
    </style>


</head>
<body >

<div id="container">
        <div id="mapa"></div>
</div>

<script type="text/javascript">

L.mapquest.key = 'KEY'; 

map= L.mapquest.map( 'mapa' , {
center: [38.58778619815616,-9.041748046875],
layers: L.mapquest.tileLayer('hybrid'),
zoom: 18

}); 

    L.marker([38.58778619815616,-9.041748046875], {
      icon: L.mapquest.icons.marker(),
      draggable: false
    }).bindPopup('Denver, CO').addTo(map);

    L.circle([38.8339, -104.8214], { radius: 20000 }).addTo(map);

    var denverLatLngs = [
      [36.99, -102.05],
      [37, -109.05],
      [41, -109.05],
      [41, -102.05]
    ];

    L.polygon(denverLatLngs, {color: 'red'}).addTo(map);

</script>
</body>

...