Question

我编写了一个谷歌地图但是使用了Angular的单页结构，因为我的页面实际上没有加载新页面，所以它只是注入它。

除非我手动刷新页面，否则不会加载Google地图。如果没有可能对此不了解的用户，而不必刷新页面，我该怎么做呢？我尝试了很多，最具体的是route.reload和window.reload。

这是将注入索引页面的实际div，它只是一个导航栏和中间部分，我将在其中注入地图。问题是，由于地图附加到索引页面的ui-view，除非您手动重新加载它，否则它不会加载。

<div ng-controller="mapController" class="" style="color: rgb(101, 0, 0); background-color: white; color: rgb(101, 0, 0);">
  <div class="" style="display: flex; flex-direction: row; flex: 2; border:1px solid rgb(101, 0, 0);">
    <div class="amenity-title" style="flex: 1; margin: 1em">
      <p><span style="font-size: 28px; font-family: crimson text, sans-serif;letter-spacing: 1.2;">NEIGHBORHOOD</span></p>
      <p style="font-family: sans-serif;">Part of Chicago's Near North Side community area, it is roughly bounded by North Avenue, Lake Shore Drive, Oak Street, and Clark Street.
      </p>
      <a ui-sref="imagesOfApartments"><h3 style="color: rgb(101, 0, 0); font-family: sans-serif;">view apartments</h3></a>
      <a ui-sref="amenities"><h3 style="color: rgb(101, 0, 0); font-family: sans-serif;">view ammenities</h3></a>
      <p ng-click="goBack()"><a href="#" style="color: rgb(101, 0, 0);font-family: Crimson-text, sans-serif;">back</a></p>
    </div>
    <div style="font-family: sans-serif; height:450px; display: flex; flex-direction: row; flex: 2;">
      <div id="" style="flex-direction: column; display: flex; flex: 1; height: 450px; width: 50%;background-color: white; justify-content: center; align-items: center;">    
        <div style="display: flex; justify-content: center; margin: 1em; height: 50px; width: 150px;background-color: white; border: 1px solid rgb(101, 0, 0);">
          <h3>All Locations</h3>
        </div>
        <div style="display: flex; justify-content: center; margin: 1em; height: 50px; width: 150px;background-color: white; border: 1px solid rgb(101, 0, 0);">
          <h3>Restaurants</h3>
        </div>
        <div style="display: flex; justify-content: center; margin: 1em; height: 50px; width: 150px;background-color: white; border: 1px solid rgb(101, 0, 0);">
          <h3>Attractions</h3>
        </div>
        <div style="display: flex; justify-content: center; margin: 1em; height: 50px; width: 150px;background-color: white; border: 1px solid rgb(101, 0, 0);">
          <h3>Hotels</h3>
        </div>
      </div>
      <div id="" style="display: flex; flex: 2; height: 450px; width: 50%;background-color: white;">
        <div id="map" style="width: 100%; height:430px; margin: 5px; background-color: rgb(101, 0, 0);">map</div>
      </div>
    </div>    
  </div>
</div><!-- end of apartment details container-->

我在这里打电话给地图;这很好。

function initMap() {
    let options = {
        zoom:8,
        center: {lat:81.9057, lng:-87.6303}
    }

    let map = new google.maps.Map(document.getElementById('map'), options);

    let marker = new google.maps.Marker({
        position: {lat:81.9057, lng:-87.6303},
        map:map,
        icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    });

    let infoWindow = new google.maps.InfoWindow({
        content:'<h5>address</h5>'
    });

    marker.addListener('click', function(){
        infoWindow.open(map, marker);
    });
}

我想如果我添加了一个控制器，我只会调用路由重载，并且每次加载控制器的页面都会运行控制器，该控制器将运行route.reload功能，但它无效。谁能明白为什么？

app.controller("mapController", ['$route', function ($http,$scope,$route) {  
    $route.reload();
    console.log('route');
    }  
}]);

我附加了添加的mapController（我将地图控制器添加到我的主模板所在的索引页面，不会改变）。

除非我使用AngularJS进行刷新，否则Google Maps Javascript API无法加载

0 个答案: