将文件变量“街道地址”列表转换为谷歌地图上的多个引脚

Question

我迷失了尝试将谷歌地图上的多个引脚的json文件变量（“街道地址”）列表。

我的json文件如下所示。

{
"address_number": {
    "address": "20 test ct",
    "time": "10:00 PM",
    "show_address": "false",
    "code": "000000"
},
"address_number2": {
    "address": "20 test ct",
    "time": "10:00 PM",
    "show_address": "false",
    "code": "000002"
},
"916788": {
    "address": "test addy ct",
    "date": "0011-11-11",
    "time": "11:11",
    "show_address": "True",
    "code": "11111"
},
"519802": {
    "address": "20 test ct",
    "date": "",
    "time": "",
    "show_address": "",
    "code": "000000"
},
"586910": {
    "address": "20 test ct",
    "date": "",
    "time": "",
    "show_address": "",
    "code": "000000"
}

如何获取（“地址”）并将它们转换为地图上的多个引脚，而其他数据集在单击所述引脚时列为注释。

$.ajax({
url: './add_address/data.json',
dataType: 'json',
type: 'get',
cache: true,

success: function (data) {
    $(data.address_number).each(function (index, value) {
        console.log(value.name);
    })
}});

以上是我必须完成的唯一想法，除此之外，我几乎失去了。

Answer 1

相关问题：Google Maps V3 infowindows displaying wrong content on pins

处理您的JSON对象，在其中的每个元素上调用Google Maps Javascript API Geocoder：

for (obj in inputJson) { 
  geocode(obj, inputJson[obj]);
}; 

在geocode函数中，在返回的地址处向地图添加一个标记，并添加包含“其他”信息的infowindow，使用函数闭包（IIFE）将infowindow中的输入数据与标记相关联：

// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
function geocode(name, obj) {
  geocoder.geocode({
    'address': obj.address
  }, function(results, status) {
    if (status === 'OK') {
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      // modified from https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
      google.maps.event.addListener(marker, 'click', (function(marker, obj) {
        return function(evt) {
          var contentString = '<b>' + name + "</b><br>";
          for (attr in obj) {
            contentString += attr + ":" + obj[attr] + "<br>";
          }
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
        }
      })(marker, obj));
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

注意：对于大量标记（大于10的标记），您将超出Google Maps Geocoding服务的配额/速率限制，并且必须处理OVER_QUERY_LIMIT结果。

proof of concept fiddle

代码段：

var geocoder;
var map;
var bounds;
var infowindow;
// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
function geocode(name, obj) {
  geocoder.geocode({
    'address': obj.address
  }, function(results, status) {
    if (status === 'OK') {
      bounds.extend(results[0].geometry.location);
      map.fitBounds(bounds);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      // modified from https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
      google.maps.event.addListener(marker, 'click', (function(marker, obj) {
        return function(evt) {
          var contentString = '<b>' + name + "</b><br>";
          for (attr in obj) {
            contentString += attr + ":" + obj[attr] + "<br>";
          }
          infowindow.setContent(contentString);
          infowindow.open(map, marker);
        }
      })(marker, obj));
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geocoder = new google.maps.Geocoder();
  bounds = new google.maps.LatLngBounds();
  infowindow = new google.maps.InfoWindow();
  for (obj in inputJson) {
    geocode(obj, inputJson[obj]);
  };
}
google.maps.event.addDomListener(window, "load", initialize);
var inputJson = {
  "address_number": {
    "address": "New York, NY",
    "time": "10:00 PM",
    "show_address": "false",
    "code": "000000"
  },
  "address_number2": {
    "address": "Newark, NJ",
    "time": "10:00 PM",
    "show_address": "false",
    "code": "000002"
  },
  "916788": {
    "address": "Baltimore, MD",
    "date": "0011-11-11",
    "time": "11:11",
    "show_address": "True",
    "code": "11111"
  },
  "519802": {
    "address": "Boston, MA",
    "date": "",
    "time": "",
    "show_address": "",
    "code": "000000"
  },
  "586910": {
    "address": "Philadelphia, PA",
    "date": "",
    "time": "",
    "show_address": "",
    "code": "000000"
  }
};

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>