Question

我正在尝试在bootstrap模式中显示带有可拖动标记的谷歌地图。它工作得很好，但问题是标记显示在div的左上方，如下图所示。

我想在div的中心显示

它将显示在模态的左上角。这是我显示谷歌地图的代码。

function init() {
      var mapCanvas = document.getElementById('map_canvas');

      $('.mapModal').on('shown.bs.modal', function () {
          google.maps.event.trigger(mapCanvas, "resize");
      });

        //var myLatlng = new google.maps.LatLng(23.0203135, 72.5561606);
        var myLatlng = {lat: 23.019523540982888, lng: 72.55628934603271};
        /*
          23.019523540982888
          72.55628934603271
          23.0203135
          72.5561606
        */
        var myOptions = {
            zoom: 15,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        var marker = new google.maps.Marker({
            draggable: true,
            map: map,
            position: myLatlng,
            title: "Your location"
        });
        //To Fill Lat Long
        google.maps.event.addListener(marker, 'dragend', function (event) {
            document.getElementById("lat").value = event.latLng.lat();
            document.getElementById("lng").value = event.latLng.lng();
        });
}

Answer 1

只需使用map.setCenter(myLatlng);即可。

var map;
    //google.maps.event.addDomListener(window, "load", init());
    function init() {
      var mapCanvas = document.getElementById('map_canvas');
      var myLatlng = {lat: 23.019523540982888, lng: 72.55628934603271};

      $('.mapModal').on('shown.bs.modal', function () {
          google.maps.event.trigger(mapCanvas, "resize");
          map.setCenter(myLatlng);
      });

        //var myLatlng = new google.maps.LatLng(23.019523540982888, 72.55628934603271);
        /*
          23.019523540982888
          72.55628934603271
          23.0203135
          72.5561606
        */
        var myOptions = {
            zoom: 15,
            center: new google.maps.LatLng(23.0203135, 72.5561606),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(mapCanvas, myOptions);

        var marker = new google.maps.Marker({
            draggable: true,
            map: map,
            position: myLatlng,
            title: "Your location"
        });
        //To Fill Lat Long
        google.maps.event.addListener(marker, 'dragend', function (event) {
            document.getElementById("lat").value = event.latLng.lat();
            document.getElementById("lng").value = event.latLng.lng();
        });
    }

Answer 2

首先，我建议你将你的谷歌地图逻辑和所有创建地图的代码放在bootstrap模态事件中;创建之后，像这样：

$('#myModal').on('show.bs.modal', function (e) {
  // .. put you map code here or just hook your custom function
});

然后查看您的地图是否居中。另外，请确保为ex：<div id="map_canvas" style="height: 500px;"></div>

指定div或元素的显式高度

Google地图标记显示在左上角

2 个答案: