在HTML下拉列表中加载JSON数据（google api）

时间：2017-05-06 21:32:08

标签： javascript json google-maps-api-3

我真的很难过。我有以下列表。我需要将名称和地址插入JSON文件的下拉列表中。

 <div class="dropdown-list">
        <div class="list-container">
            <ul class="list">
                <li>option 1</li>
                <li>option 2</li>
                <li>option 3</li>
                <li>option 4</li>
                <li>option 5</li>
                <li>option 6</li>
                <li>option 7</li>
                <li>option 8</li>
                <li>option 9</li>
                <li>option 10</li>
                <li>option 11</li>
                <li>option 12</li>
                <li>option 13</li>
                <li>option 14</li>
                <li>option 15</li>
                <li>option 16</li>
                <li>option 17</li>
            </ul>
        </div>
    </div>
</div>

我的JS如下：

var map = new google.maps.Map(document.getElementById('map1'), {
center: {lat: 42.696472, lng: 23.322290},
zoom: 16

});
 $.getJSON("js/office.txt", function(json1) {
 $.each(json1, function(key, data) {
    var latLng = new google.maps.LatLng(data.lat, data.lng);
    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title,
        icon: 'img/marker.png'
    });
 });
 });

我的JSON如下：

enter code here
[
  {
    "title": "Office1",
    "adress" : "street Pozitano 8",
    "lat": 42.695821, 
    "lng": 23.320641,
    "atm": "yes",
    "longtime": "yes"
  },
  {
    "title": "Office2",
    "adress": "street Vesletz 12",
    "lat": 42.698801, 
    "lng": 23.325790,
    "atm": "yes",
    "longtime": "no"
  },
  {
    "title": "Office3",
    "adress": "street Tri Ushi 6A",
    "lat": 42.695695, 
    "lng": 23.316714,
    "atm": "no",
    "longtime": "no"
  },
  {
    "title": "Office4",
    "adress": "street Vladaiska 10",
    "lat": 42.695237,
    "lng": 23.314203,
    "atm": "no",
    "longtime": "yes"
  },
  {
    "title": "Office5",
    "adress": "street Solunska 32A",
    "lat": 42.692977,
    "lng": 23.318311,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office6",
    "adress": "street Gurko 3",
    "lat": 42.693381,
    "lng": 23.325347,
    "atm": "yes",
    "longtime": "yes"
  },
  {
    "title": "Office7",
    "adress" : "street Kniaz Alexander I",
    "lat": 42.696506,
    "lng": 23.325753,
    "atm": "yes",
    "longtime": "yes"
  }, 
  {
    "title": "Office8",
    "adress": "street Makedonia 15-17",
    "lat": 42.693170,
    "lng": 23.312625,
    "atm": "no",
    "longtime": "yes"
  }, 
  {
    "title": "Office9",
    "adress": "street Ivan Rilski 10b",
    "lat": 42.690475,
    "lng": 23.313270,
    "atm": "yes",
    "longtime": "no"
  }, 
  {
    "title": "Office10",
    "adress": "street Tsar Samuil 88A",
    "lat": 42.700817,
    "lng": 23.319171,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office11",
    "adress": "street Saint Saint Kiril and Metodii 82",
    "lat": 42.702713,
    "lng": 23.324141,
    "atm": "no",
    "longtime": "yes"
  }, 
  {
    "title": "Office12",
    "adress": "street Budapeshta 39-41",
    "lat": 42.702204,
    "lng": 23.327199,
    "atm": "yes",
    "longtime": "yes"
  }, 
  {
    "title": "Office13",
    "adress": "boulevard Alexander Dondukov 9",
    "lat": 42.697981,
    "lng": 23.327020,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office14",
    "adress": "street Pozitano",
    "lat": 42.697885,
    "lng": 23.307859,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office15",
    "adress": "Zona B-5",
    "lat": 42.696585,
    "lng": 23.306401,
    "atm": "no",
    "longtime": "yes"
  }, 
  {
    "title": "Office16",
    "adress": "street Klokotniza 21",
    "lat": 42.707871,
    "lng": 23.320321,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office17",
    "adress": "street Marko Balabanov 2",
    "lat": 42.697109,
    "lng": 23.314038,
    "atm": "no",
    "longtime": "no"
  }
]

2 个答案:

答案 0 :(得分：0)

为什么不动态构建列表元素？

＆＃13;
＆＃13; 
var json = [
  {
    "title": "Office1",
    "adress" : "street Pozitano 8",
    "lat": 42.695821, 
    "lng": 23.320641,
    "atm": "yes",
    "longtime": "yes"
  },
  {
    "title": "Office2",
    "adress": "street Vesletz 12",
    "lat": 42.698801, 
    "lng": 23.325790,
    "atm": "yes",
    "longtime": "no"
  },
  {
    "title": "Office3",
    "adress": "street Tri Ushi 6A",
    "lat": 42.695695, 
    "lng": 23.316714,
    "atm": "no",
    "longtime": "no"
  },
  {
    "title": "Office4",
    "adress": "street Vladaiska 10",
    "lat": 42.695237,
    "lng": 23.314203,
    "atm": "no",
    "longtime": "yes"
  },
  {
    "title": "Office5",
    "adress": "street Solunska 32A",
    "lat": 42.692977,
    "lng": 23.318311,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office6",
    "adress": "street Gurko 3",
    "lat": 42.693381,
    "lng": 23.325347,
    "atm": "yes",
    "longtime": "yes"
  },
  {
    "title": "Office7",
    "adress" : "street Kniaz Alexander I",
    "lat": 42.696506,
    "lng": 23.325753,
    "atm": "yes",
    "longtime": "yes"
  }, 
  {
    "title": "Office8",
    "adress": "street Makedonia 15-17",
    "lat": 42.693170,
    "lng": 23.312625,
    "atm": "no",
    "longtime": "yes"
  }, 
  {
    "title": "Office9",
    "adress": "street Ivan Rilski 10b",
    "lat": 42.690475,
    "lng": 23.313270,
    "atm": "yes",
    "longtime": "no"
  }, 
  {
    "title": "Office10",
    "adress": "street Tsar Samuil 88A",
    "lat": 42.700817,
    "lng": 23.319171,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office11",
    "adress": "street Saint Saint Kiril and Metodii 82",
    "lat": 42.702713,
    "lng": 23.324141,
    "atm": "no",
    "longtime": "yes"
  }, 
  {
    "title": "Office12",
    "adress": "street Budapeshta 39-41",
    "lat": 42.702204,
    "lng": 23.327199,
    "atm": "yes",
    "longtime": "yes"
  }, 
  {
    "title": "Office13",
    "adress": "boulevard Alexander Dondukov 9",
    "lat": 42.697981,
    "lng": 23.327020,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office14",
    "adress": "street Pozitano",
    "lat": 42.697885,
    "lng": 23.307859,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office15",
    "adress": "Zona B-5",
    "lat": 42.696585,
    "lng": 23.306401,
    "atm": "no",
    "longtime": "yes"
  }, 
  {
    "title": "Office16",
    "adress": "street Klokotniza 21",
    "lat": 42.707871,
    "lng": 23.320321,
    "atm": "no",
    "longtime": "no"
  }, 
  {
    "title": "Office17",
    "adress": "street Marko Balabanov 2",
    "lat": 42.697109,
    "lng": 23.314038,
    "atm": "no",
    "longtime": "no"
  }
];

var html = '';

for (var i = 0; i < json.length; i++) {
  html += '<li>' + json[i].title + ' - ' + json[i].adress + '</li>';
}

document.querySelector('.list').innerHTML = html;
＆＃13; 
<div class="dropdown-list">
  <div class="list-container">
    <ul class="list"></ul>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您只需将每个元素添加到列表中。当您使用jQuery（$ .each和$ .getJSON来自此库）时，您也可以使用它。

var map = new google.maps.Map(document.getElementById('map1'), {
  center: {
    lat: 42.696472,
    lng: 23.322290
  },
  zoom: 16

});
$.getJSON("js/office.txt", function(json1) {
  $('.dropdown-list .list-container .list').empty(); //Clear the current content
  $.each(json1, function(key, data) {
    $('.dropdown-list .list-container .list').append("<li>" + data.title + " - " + data.adress + "</li>");
    var latLng = new google.maps.LatLng(data.lat, data.lng);
    // Creating a marker and putting it on the map
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: data.title,
      icon: 'img/marker.png'
    });
  });
});
相关问题
最新问题