Question

模态弹出式地图on my page here（在小地图上点击时）不会居中，因为它太靠右，并且标记未显示。如果有人可以帮助诊断这将是伟大的：

<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');
})

非常感谢

Answer 1

没有标记，因为您没有创建标记。您应该在地图上放置一个标记（如果您想要显示一个infowindow，如果您单击它，则指定一个监听器。在这种情况下，您还必须创建一个infowinfow）。完成此操作后，您必须在调整大小触发后使地图居中。

试试此代码

<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
});

Google Map v3 API未居中且没有标记

1 个答案: