Question

我正在尝试使用Json文件中的位置标记。我正在使用JQuery Promise，因此当两个promises（启动map和获取json文件）都被解析时，将设置标记。我在用这个带有地图的html页面：

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <script type="text/javascript" src="js/markerclusterer_compiled.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap" async defer></script>
 </head>
 <body>
   <div id="map"></div>

    <script type="lodash/template" id="infowindow-template" >
        <% items.forEach(function(item) { %>
        <p><b><%-item.title%></b>, <%-item.author%></p>
        <p><%-item.location%></p>
        <p><a href="https://www.myminifactory.com/object/<%-item.url%>" target="_blank">Get more</a></p>
        <% }); %>
    </script>
 </body>

包含所有功能的app.js：

var map;
var loadMapDeferred = $.Deferred();
var allSculptures;
var locations;

initMap = function() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 30, lng: 0},
        zoom: 3
    });
    loadMapDeferred.resolve();
}

var urlCDN = 'http://localhost/myproject/uploads/data.json';
var loadDataPromise = $.getJSON(urlCDN).then(function(data) {
    allSculptures = data.sculptures;
    locations = {};
    for(var i=0; i<data.location.length; i++) {
        locations[data.location[i].name] = data.location[i].location;
    }
});

$.when(loadMapDeferred, loadDataPromise).then(function() {
    var markers = _.map(locations, function(location, locationName) {
        return createMarker(locationName, location);
    });

    var mcOptions = {gridSize: 25};
    new MarkerClusterer(map, markers, mcOptions);
});

var currentInfoWindow;

function createMarker(locationName, location) {
    var marker = new google.maps.Marker({
        position: location
    });

    var infoWindow;
    marker.addListener('click', function() {
        if(currentInfoWindow)
            currentInfoWindow.close();
        if(infoWindow == null) {
            infoWindow = new google.maps.InfoWindow({
                content: getCityInfoWindow(locationName)
            });
        }
        infoWindow.open(map, marker);
        currentInfoWindow = infoWindow;
    });

    return marker;
}

data.json

 {"sculptures":[{"title":"Bust of Caracalla","location":"Paris"},
           {"title":"Brutus The Younger","location":"Paris"}],
  "location":[{"name":"Beaux-Arts in Dijon, France","location":{"lat":47,"lng":5}},
         {"name":"Louvre, Paris","location":{"lat":48,"lng":2}},
         {"name":"St Pauls Cathedral, London","location":{"lat":51,"lng":-0}},
         {"name":"V&A, London","location":{"lat":51,"lng":-0}}]}

我正在获取地图，但看不到标记。我做错了什么？

Answer 1

当你创建这样的标记时：

var marker = new google.maps.Marker({
   position: location
});

您还需要指定地图：

var marker = new google.maps.Marker({
   position: location,
   map: map
});

JQuery Promise +来自JSON的位置的Google地图设置标记不起作用

1 个答案: