Javascript 从单个div中的邮政编码attr设置Google地图标记

因此，我有一个需要多个位置/标记的谷歌地图。 到目前为止，我已经将它们设置成这样的数组

var locations = [
    ['Sheffield', 53.381690, -0.277405, 3],
    ['Barnsley', 53.824976, -0.832214, 2],
    ['Leeds', 53.865486, -1.216736, 1]
];

我需要做的是从一个div的单个attr标记中提取它们，映射代码如下所示

<div id="map">
    <div class="marker" postcode="S71 1ET" data-lat="53.381690" data-lng="-0.277405"></div>
    <div class="marker" postcode="M16 0RA" data-lat="53.824976" data-lng="-0.832214"></div>
    <div class="marker" postcode="S2 4SU" data-lat="53.865486" data-lng="-1.216736"></div>
</div>

理想情况下，我也希望通过邮政编码attr而不是lat lng填充位置。所以它需要使用地理编码

任何帮助都很好，我的代码如下

<div id="map">
            <div class="marker" postcode="S71 1ET" data-lat="53.381690" data-lng="-0.277405"></div>
            <div class="marker" postcode="M16 0RA" data-lat="53.824976" data-lng="-0.832214"></div>
            <div class="marker" postcode="S2 4SU" data-lat="53.865486" data-lng="-1.216736"></div>
        </div>

        <script>

        var locations = [
            ['Sheffield', 53.381690, -0.277405, 3],
            ['Barnsley', 53.824976, -0.832214, 2],
            ['Leeds', 53.865486, -1.216736, 1]
        ];

        function initMap() {

            var myLatLng = {lat: 53.774689, lng: 5.888672};

            var map = new google.maps.Map(document.getElementById('map'), {
                 zoom: 6,
                 center: myLatLng
            });

            var count;

            for (count = 0; count < locations.length; count++) {
                new google.maps.Marker({
                    position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                    map: map,
                    title: locations[count][0]
                });
            }

        }

        </script>

变量位置=[
[Sheffield'，53.381690，-0.277405,3]，
[Barnsley'，53.824976，-0.832214,2]，
[Leeds'，53.865486，-1.216736,1]
];
函数initMap（）{
var Mylatng={lat:53.774689，lng:5.888672}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：6，
中心：myLatLng
});
var计数；
对于（计数=0；计数

理想情况下，我也希望通过邮政编码attr而不是lat lng填充位置

我倾向于不同意。如果您有lat和lng，请使用它们。否则，您确实需要地理编码、地址搜索。。。这减慢了一切，这是更多的代码，这是为不同国家的人谁可能得到一个不同国家相同的邮政编码出来

无论如何，这是可行的：

<style>#map {height: 400px;}</style>
<div id="map"></div>
<div id="markers">
  <div class="marker" data-postcode="S71 1ET" data-lat="53.381690" data-lng="-0.277405"></div>
  <div class="marker" data-postcode="M16 0RA" data-lat="53.824976" data-lng="-0.832214"></div>
  <div class="marker" data-postcode="S2 4SU" data-lat="53.865486" data-lng="-1.216736"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script>
    // notice, jQuery makes it easier to read/write from/to HTML elements.  But it's not required.
    function readMarkersData() {
      var locations = [];
      var markerdivs = document.getElementById('markers').children;
      for(var i=0; i<markerdivs.length; i++) {
        var item = markerdivs[i];
        locations.push([
          item.getAttribute('data-postcode'),
          item.getAttribute('data-lat'),
          item.getAttribute('data-lng')
        ])
      }
      return locations;
    }
    function initMap() {
        var myLatLng = {lat: 53.774689, lng: 5.888672};
        var map = new google.maps.Map(document.getElementById('map'), {
             zoom: 6,
             center: myLatLng
        });
        var count;
        var locations = readMarkersData();
        for (count = 0; count < locations.length; count++) {
            new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map,
                title: locations[count][0]
            });
        }
    }
</script>

#映射{高度：400px；}
//注意，jQuery使从HTML元素读/写HTML元素变得更容易。但这不是必需的。
函数readMarkersData（）{
var位置=[]；
var markerdivs=document.getElementById（'markers'）.children；
对于（var i=0；iBriliant，谢谢你，我会在几天前给你这个。我算出来了，但这个看起来更干净，所以我会使用这个。PS。邮政编码的原因只是更方便客户使用。