Javascript 地理编码器、传单和功能范围的问题_Javascript_Jquery

Javascript 地理编码器、传单和功能范围的问题

javascript jquery

Javascript 地理编码器、传单和功能范围的问题,javascript,jquery,Javascript,Jquery,我有一些列表ITEN（li），其中一些信息存储在数据属性中，我需要从所有列表ITEN中获取这些信息，制作一个数组，并使用de geocoder填充一张传单地图，以从地址中获取纬度和经度我可以让地图显示列表的第一个地址，但不能添加其他制造商我创建了两个函数，一个用于初始化映射，另一个用于生成坐标，但是当我调用函数时，第二个函数首先运行，因此它不起作用，它表示映射的id没有定义有人能帮我找到更好的方法吗？我真的迷路了尝试回调 <!DOCTYPE html> <html la

我有一些列表ITEN（li），其中一些信息存储在数据属性中，我需要从所有列表ITEN中获取这些信息，制作一个数组，并使用de geocoder填充一张传单地图，以从地址中获取纬度和经度

我可以让地图显示列表的第一个地址，但不能添加其他制造商

我创建了两个函数，一个用于初始化映射，另一个用于生成坐标，但是当我调用函数时，第二个函数首先运行，因此它不起作用，它表示映射的id没有定义

有人能帮我找到更好的方法吗？我真的迷路了

尝试回调

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
   <style>
    #mapid { height: 580px; }
   </style>

  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
</head>
<body>
  <ul class="nav nav-tabs">
    <li role="presentation">
      <a class="dealer-item" data-index="1" data-lat="" data-long="" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2585.086601920517!2d-46.64672714361121!3d-23.609190852522833!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a40aaa447e5%3A0xd288d617a25e7258!2sAv.+Jos%C3%A9+Maria+Whitaker%2C+990+-+Planalto+Paulista%2C+S%C3%A3o+Paulo+-+SP%2C+Brasil!5e0!3m2!1spt-BR!2sbr!4v1486489719999" data-name="TesteTeste - Planalto Paulista" data-phone="(11) 3456-7890" data-whatsapp="(11) 91234-4444" data-description="<p>&amp;nbsp;</p>
      <p><strong>Hor&amp;aacute;rio de atendimento</strong></p>
      <p>Segunda &amp;agrave; Sexta: 8:00h - 18:00h</p>
      <p><br /> Telefone :&amp;nbsp;<strong>(11) 34157890</strong><br /> &amp;nbsp;</p>
      <p>&amp;nbsp;</p>
      <p>&amp;nbsp;</p>" data-cep="04057-000" data-street="Avenida José Maria Whitaker" data-number="990" data-city="São Paulo" data-neighborhood="Planalto Paulista" data-state="SP">DisalMotors - Planalto Paulista</a>
    </li>
    <li role="presentation">
      <a class="dealer-item" data-index="3" data-lat="" data-long="" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14624.571771693081!2d-46.69182526957558!3d-23.599205954624118!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce574e8baae539%3A0x50070adb380d45c4!2sVila+Olimpia%2C+S%C3%A3o+Paulo+-+SP!5e0!3m2!1spt-BR!2sbr!4v1488832179047" data-name="DisalMotors - Vila Olimpia" data-phone="(11) 3478-3859" data-whatsapp="(11) 91234-4578" data-description="<p>&amp;nbsp;</p>
      <p><strong>Hor&amp;aacute;rio de atendimento</strong></p>
      <p>Segunda &amp;agrave; Sexta: 8:00h - 18:00h</p>
      <p><br />
      Telefone :&amp;nbsp;<strong>(11) 31234-4512</strong><br />
      &amp;nbsp;</p>
      <p>&amp;nbsp;</p>
      <p>&amp;nbsp;</p>
      " data-cep="04537-130" data-street="Travessa Francis Plante" data-number="3" data-city="São Paulo" data-neighborhood="Vila Olímpia" data-state="SP">DisalMotors - Vila Olimpia</a>
    </li>
</ul>
<div id="mapid"></div>

<script type="text/javascript">
  var latitude = '';
  var longitude = '';
  var latLng = '';
  var coord = '';
  var html_info = '<table cellspacing=0 cellpadding=0 border=0><tr>';
    var accessToken = 'pk.eyJ1IjoidHVuZWNhIiwiYSI6ImNqejRheHE3NzBic20zbm1yd3hpM3NkbjUifQ.LCfB7ZqHaGHRqduJukG6Pw';

  geocoder = new L.Control.Geocoder.Nominatim();

  var listaLocais = []

  $('a.dealer-item').each(function(index){
      var local = new Object()
      local.name = $(this).data('name')
      local.phone = $(this).data('phone')
      local.whatsapp = $(this).data('whatsapp')
      local.street = $(this).data('street')
      local.number = $(this).data('number')
      local.city = $(this).data('city')
      local.neighborhood = $(this).data('neighborhood')
      local.state = $(this).data('state')
      local.cep = $(this).data('cep')
      local.desc = $(this).data('description')
      local.address = `${local.street}, ${local.number}`
      //, ${local.city}, ${local.state}
      local.html_info = `
          <td style="vertical-align:top;font-family:arial;font-size:13px;color:#444444;padding-left:15px">
              <p style="margin-top:15px;margin-bottom:0px;font-size:16px;font-weight:bold;letter-spacing:-1px;color:#223399;">
                  ${local.name}
              </p>
              ${local.address}<br>
              ${local.phone}<br>
              <a href="https://maps.google.com.br/maps?saddr=Minha+Localizacao&daddr=${local.name},${local.address}" target="_blank">Traçar rota</a>
          </td>`
      listaLocais.push(local)
  })

  function initMap(){
    geocoder.geocode(listaLocais[0].address, function(results) {  
      latLng = new L.LatLng(results[0].center.lat, results[0].center.lng);
      var mymap = L.map('mapid').setView(latLng, 17);
      L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + accessToken, {
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          maxZoom: 18,
          id: 'mapbox.streets',
          accessToken: accessToken
      }).addTo(mymap);    
      marker = new L.Marker (latLng).addTo(mymap);
      L.marker(latLng).addTo(mymap).bindPopup(listaLocais[0].html_info).openPopup();
      console.log('adicionou o primeiro');
    })
  }

  function getCoords(listaLocais){
    if (typeof mymap == undefined){
      var mymap = L.map('mapid');
    }
    for (i = 0; i < listaLocais.length; i++) 
    {
      geocoder.geocode(listaLocais[i].address, function(results) {  
          latLng = new L.LatLng(results[0].center.lat, results[0].center.lng);
          //console.log('passo ' + i + ' | endereço atual: ' + ' coords: ' + coord);
          marker = new L.Marker (latLng).addTo(mymap);
      });

      //L.marker(latLng).addTo(mymap).bindPopup(html_info).openPopup();       
    }
    console.log('retorno do for é ' + coord);
  }

  initMap();

  getCoords(listaLocais);


</script>
</body>
</html>


文件
#mapid{高度：580px；}


`
listaLocais.push（本地）
})
函数initMap（）{
geocoder.geocode（listaLocais[0]。地址，函数（结果）{
latLng=新的L.latLng（结果[0].center.lat，结果[0].center.lng）；
var mymap=L.map（'mapid'）.setView（latLng，17）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token='+accessToken{
属性：“地图数据©；贡献者，图像©”，
maxZoom:18，
id:“地图盒。街道”，
accessToken:accessToken
}).addTo（mymap）；
标记=新的L.标记（latLng）.添加到（mymap）；
L.marker（latLng）.addTo（mymap）.bindpoppup（listaLocais[0].html_info）.openPopup（）；
console.log（'adicionou o primeiro'）；
})
}
函数getCoords（listaLocais）{
if（typeof mymap==未定义）{
var mymap=L.map（'mapid'）；
}
对于（i=0；i


用li存储的信息填充地图
有人吗？有人能帮忙吗？我还没弄明白……平。。。。。。。。。。。