将JSON文件中的数据加载到Google Maps中的地图标记中 [英] Load data from JSON file into map markers in Google Maps

问题描述

我有以下JSON文件:

I've got the following JSON file:

{
   "universities" : [
    [
        "title": "Aberystwyth University",
        "web": "www.aber.ac.uk",
        "phone": "[phone]",
        "lat": 52.415524,
        "lng": -4.063066
    ],
    [
        "title": "Bangor University",
        "web": "www.bangor.ac.uk",
        "phone": "[phone]",
        "lat": 53.229520,
        "lng": -4.129987
    ],
    [
        "title": "Cardiff Metropolitan University",
        "website": "www.cardiffmet.ac.uk",
        "phone": "[phone]", 
        "lat": 51.482708,
        "lng": -3.165881
    ]
  ]
}

并且我正在尝试将该文件中的数据加载到我的Google Maps脚本中，以生成带有相应信息窗口的一些地图标记.这是我的脚本:

And I'm trying to load the data from this file into my google maps script to produce some map markers with respective info windows. Here's my script:

var map;
var icon = "http://path/to/icon.png";
var json = "http://path/to/universities.json";

function initialize() {

  var mapProp = {
  center:   new google.maps.LatLng(52.4550,-3.3833), //LLANDRINDOD WELLS
   zoom:        7,
   mapTypeId:  google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map"), mapProp);

  $.getJSON(json, function(json1) {

$.each(json1, function(key, data) {

    var latLng = new google.maps.LatLng(data.lat, data.lng);

    var marker = new google.maps.Marker({
        position:   latLng,
        map:        map,
        icon:       icon,
        title:      data.title
    });

    var details = data.website + ", " + data.phone + ".";

    bindInfoWindow(marker, map, infowindow, details);

});

 });

}

function bindInfoWindow(marker, map, infowindow, strDescription) {
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

但是没有加载数据(即未显示地图标记和信息窗口)?我的JSON格式有任何问题吗?我看过Stacked以前的解决方案，例如这一个，但它们没有加载.有什么想法吗?

But the data isn't loading (i.e. the map markers and infowindows aren't showing)? Are there any problems with my JSON format. I've looked at previous solutions from Stacked such as this one but they're not loading. Any ideas?

推荐答案

发布的代码存在三个问题:

There are three issues with the posted code:

1. 大学数组应该是JavaScript对象"{}"的数组，而不是javascript数组"[]".
2. 您需要处理$ .each中的大学数组
3. 您的javascript对象的"web"属性不正确，代码需要"website"

工作小提琴(不使用JSON提取)

working fiddle (without the JSON fetch)

工作代码段:

var map;
var icon = "http://path/to/icon.png";
var json = "http://path/to/universities.json";
var infowindow = new google.maps.InfoWindow();

function initialize() {

  var mapProp = {
    center: new google.maps.LatLng(52.4550, -3.3833), //LLANDRINDOD WELLS
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map"), mapProp);

  //  $.getJSON(json, function(json1) {
  var json1 = {
    "universities": [{
        "title": "Aberystwyth University",
        "website": "www.aber.ac.uk",
        "phone": "[phone]",
        "lat": 52.415524,
        "lng": -4.063066
      },
      {
        "title": "Bangor University",
        "website": "www.bangor.ac.uk",
        "phone": "[phone]",
        "lat": 53.229520,
        "lng": -4.129987
      },
      {
        "title": "Cardiff Metropolitan University",
        "website": "www.cardiffmet.ac.uk",
        "phone": "[phone]",
        "lat": 51.482708,
        "lng": -3.165881
      }
    ]
  };
  $.each(json1.universities, function(key, data) {

    var latLng = new google.maps.LatLng(data.lat, data.lng);

    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      // icon: icon,
      title: data.title
    });

    var details = data.website + ", " + data.phone + ".";

    bindInfoWindow(marker, map, infowindow, details);

    //    });

  });

}

function bindInfoWindow(marker, map, infowindow, strDescription) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(strDescription);
    infowindow.open(map, marker);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>

这篇关于将JSON文件中的数据加载到Google Maps中的地图标记中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！