Modal中的Google地图不居中

时间:2017-03-20 17:20:37

标签: google-maps twitter-bootstrap-3

我在模式中使用Google地图。但它的中心不是我想要的。

我使用以下脚本:

<script>
      function initMap() {

        var lattp = <?php echo json_encode($lattp);?>;
        var lngtp = <?php echo json_encode($lngtp);?>;
        var zoomtp = <?php echo json_encode($zoomtp);?>;
        var tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};  

        var latrest = <?php echo json_encode($latrest);?>;
        var lngrest = <?php echo json_encode($lngrest);?>;
        var rest = {lat: JSON.parse(latrest), lng: JSON.parse(lngrest)};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: JSON.parse(zoomtp),
          center: tp
        });

        var marker = new google.maps.Marker({
          position: rest,
          map: map
        });}
    $('#myModal').on('shown.bs.modal', function() {
        google.maps.event.trigger(map, "resize");
        map.setCenter(tp);
    });

    </script>

结果不是我想要的。您可以查看它:https://www.checkjevoeding.be/uitstap/tp_rest_dishes.php?id=9

点击“Aanduiding parkplan”

1 个答案:

答案 0 :(得分:0)

您应该将maptp移出initMap()方法,因为该方法无法访问该方法。

<script>
  var map, tp;
  function initMap() {
    var lattp = <?php echo json_encode($lattp);?>;
    var lngtp = <?php echo json_encode($lngtp);?>;
    var zoomtp = <?php echo json_encode($zoomtp);?>;
    tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};  

    var latrest = <?php echo json_encode($latrest);?>;
    var lngrest = <?php echo json_encode($lngrest);?>;
    var rest = {lat: JSON.parse(latrest), lng: JSON.parse(lngrest)};

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: JSON.parse(zoomtp),
      center: tp
    });

    var marker = new google.maps.Marker({
      position: rest,
      map: map
    });
  }
  $('#myModal').on('shown.bs.modal', function() {
     google.maps.event.trigger(map, "resize");
     map.setCenter(tp);
  });

</script>