Javascript 在HTML下拉列表中加载JSON数据（google api）_Javascript_Json_Google Maps Api 3

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

javascript json google-maps-api-3

Javascript 在HTML下拉列表中加载JSON数据（google api）,javascript,json,google-maps-api-3,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>

我真的很难受。我有下面的清单。我需要在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>

我的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"
  }
]

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

var json=[
{
“职务”：“办公室1”，
“地址”：“波兹塔诺街8号”，
“lat”：42.695821，
“液化天然气”：23.320641，
“atm”：“是”，
“长期”：“是”
},
{
“职务”：“办公室2”，
“地址”：“Vesletz街12号”，
“lat”：42.698801，
“液化天然气”：23.325790，
“atm”：“是”，
“长期”：“否”
},
{
“职务”：“办公室3”，
“地址”：“Tri-Ushi 6A街”，
“lat”：42.695695，
“液化天然气”：23.316714，
“atm”：“否”，
“长期”：“否”
},
{
“职务”：“办公室4”，
“地址”：“Vladaiska街10号”，
“lat”：42.695237，
“液化天然气”：23.314203，
“atm”：“否”，
“长期”：“是”
},
{
“职务”：“办公室5”，
“地址”：“索伦斯卡街32A”，
“lat”：42.692977，
“液化天然气”：23.318311，
“atm”：“否”，
“长期”：“否”
}, 
{
“职务”：“办公室6”，
“地址”：“街道古尔科3号”，
“lat”：42.693381，
“液化天然气”：23.325347，
“atm”：“是”，
“长期”：“是”
},
{
“职务”：“办公室7”，
“地址”：“亚历山大一世大街”，
“lat”：42.696506，
“液化天然气”：23.325753，
“atm”：“是”，
“长期”：“是”
}, 
{
“职务”：“8号办公室”，
“地址”：“Makedonia街15-17号”，
“lat”：42.693170，
“液化天然气”：23.312625，
“atm”：“否”，
“长期”：“是”
}, 
{
“职务”：“9号办公室”，
“地址”：“Ivan Rilski 10b街”，
“lat”：42.690475，
“液化天然气”：23.313270，
“atm”：“是”，
“长期”：“否”
}, 
{
“职务”：“10号办公室”，
“地址”：“沙皇萨缪尔街88A”，
“lat”：42.700817，
“液化天然气”：23.319171，
“atm”：“否”，
“长期”：“否”
}, 
{
“职务”：“11号办公室”，
“地址”：“圣基里尔和梅托迪街82号”，
“lat”：42.702713，
“液化天然气”：23.324141，
“atm”：“否”，
“长期”：“是”
}, 
{
“职务”：“12号办公室”，
“地址”：“布达佩什塔街39-41号”，
“lat”：42.702204，
“液化天然气”：23.327199，
“atm”：“是”，
“长期”：“是”
}, 
{
“职务”：“13号办公室”，
“地址”：“亚历山大·顿杜科夫大道9号”，
“lat”：42.697981，
“液化天然气”：23.327020，
“atm”：“否”，
“长期”：“否”
}, 
{
“职务”：“公职人员14”，
“地址”：“波兹塔诺大街”，
“lat”：42.697885，
“液化天然气”：23.307859，
“atm”：“否”，
“长期”：“否”
}, 
{
“职务”：“办公室15”，
“地址”：“B-5区”，
“lat”：42.696585，
“液化天然气”：23.306401，
“atm”：“否”，
“长期”：“是”
}, 
{
“职务”：“16号官员”，
“地址”：“Klokotniza 21街”，
“lat”：42.707871，
“液化天然气”：23.320321，
“atm”：“否”，
“长期”：“否”
}, 
{
“职务”：“公职人员17”，
“地址”：“Marko Balabanov街2号”，
“lat”：42.697109，
“液化天然气”：23.314038，
“atm”：“否”，
“长期”：“否”
}
];
var html=''；
for（var i=0；i'；
}
document.querySelector（'.list'）.innerHTML=html


您只需将每个元素添加到列表中即可。当您使用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'
    });
  });
});

var-map=new google.maps.map（document.getElementById（'map1'）{
中心：{
纬度：42.696472，
液化天然气：23.322290
},
缩放：16
});
$.getJSON（“js/office.txt”，函数（json1）{
$（'.dropdown list.list container.list'）.empty（）；//清除当前内容
$.each（json1，函数（键，数据）{
$（'.dropdownlist.list container.list'）。追加（“”+data.title+”-“+data.address+””）；
var latLng=新的google.maps.latLng（data.lat，data.lng）；
//创建标记并将其放在地图上
var marker=new google.maps.marker({
位置：latLng，
地图：地图，
标题：data.title，
图标：“img/marker.png”
});
});
});
非常感谢！是的，很简单，但我不知道怎么做。谢谢，非常感谢：）当你认为答案有用时，别忘了投赞成票。这就是堆栈溢出的工作原理…；）非常感谢！：）
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'
    });
  });
});