0

我的页面上的模态弹出地图（单击小地图时）没有居中，因为它离右边太远了，并且没有显示标记。如果有人可以帮助诊断那就太好了：

<script src="http://maps.googleapis.com/maps/api/js?q=London&key=xxxxxxxxxxxxxxxxxx&sensor=false"></script>
<script>
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var geolocate = function(address, callback) {
            $.ajax({
                    url: "http://maps.googleapis.com/maps/api/geocode/json",
                    data: {
                        "sensor": true,
                        "address": address
                    },
                    dataType: "json",
                    success: function(d) {
                        if (d.status == "ZERO_RESULTS") callback(false);
                        if (d.results && d.results[0] && d.results[0].geometry) {
                            callback({
                                "ne": d.results[0].geometry.bounds.northeast,
                                "sw": d.results[0].geometry.bounds.southwest,
                                "center": d.results[0].geometry.location
                            });
                        }
                        else callback(false);
                    }
                });
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
      geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {
            map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
     });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

$('#myModal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
})

非常感谢

4

1 回答 1

1

没有标记，因为您没有创建标记。您应该在地图上放置一个标记（如果您想在单击它时显示一个信息窗口，请指定一个侦听器。在这种情况下，您也必须创建一个信息窗口）。完成后，您必须在调整大小触发器后将地图居中。

试试这个代码

<script src="http://maps.googleapis.com/maps/api/js?q=London&key=xxxxxxxxxxxxxxxxxx&sensor=false"></script>
<script>
    var map;
    var marker = null;

    function initialize() {
      var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var geolocate = function(address, callback) {
            $.ajax({
                    url: "http://maps.googleapis.com/maps/api/geocode/json",
                    data: {
                        "sensor": true,
                        "address": address
                    },
                    dataType: "json",
                    success: function(d) {
                        if (d.status == "ZERO_RESULTS") callback(false);
                        if (d.results && d.results[0] && d.results[0].geometry) {
                            callback({
                                "ne": d.results[0].geometry.bounds.northeast,
                                "sw": d.results[0].geometry.bounds.southwest,
                                "center": d.results[0].geometry.location
                            });
                        }
                        else callback(false);
                    }
                });
      };
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
      geolocate("<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>", function(c) {

            if(marker == null) {
                   marker = new google.maps.Marker({
                       map: map,
                       clickable: false //remove if you want it clickable
                     });
               }
                 marker.setPosition(new google.maps.LatLng(c.center.lat, c.center.lng));
     });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

$('#myModal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(marker.getPosition()); //Center on your marker or replace it if you want to center it elsewhere
});
于 2013-05-15T18:23:58.010 回答