html - 谷歌 map 没有显示在网页上

HTML：

<ui-gmap-google-map center='map.center' zoom='map.zoom' control="map.control">
    <ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
        <ui-gmap-window show="true">
            <div class="popup">
                {{marker.content}}
            </div>
        </ui-gmap-window>
    </ui-gmap-marker>
</ui-gmap-google-map>

JS：

控制器部分：

// 谷歌地图

$scope.map = {
    center: {
        latitude: 0,
        longitude: 0
    },
    zoom: 1,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    control: {}
};

// place a marker
$scope.markers = [];

function setMarker(lat, long, title, content) {
    var marker = {
        id: $scope.markers.length+1,
        coords: {
            latitude: lat,
            longitude: long
        },
        content: content,
        options: {
            title: title,
            icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
        }
    };
    $scope.markers.push(marker);
};

$scope.DrawMap = function(response) {
    console.log("DrawMap");
    $scope.markers = [];
    var data = response.json.response.data[0].data[1];
    var markerLatLng = [];
    var map = $scope.map.control.getGMap();
    var bounds  = new google.maps.LatLngBounds();


    // set zoom level based on xlabel
    var level = response.json.response.data[0].xlabel;
    if (level === 'country') {
        $scope.map.zoom = 4;
    } else if (level === 'state') {
        $scope.map.zoom = 4;
    } else if (level === 'city') {
        $scope.map.zoom = 6;
    } else if (level === 'All Centres') {
        $scope.map.zoom = 8;
    }else if (level ==='divisons'){
        $scope.map.zoom =10;
    } else {
        $scope.map.zoom = 4;  //default to zoom 10
    };


    //set markers for each data
    $.each(data, function(key, entry) {

       setMarker(entry.lat, entry.long,
                 entry.x,
                 /*response.json.response.data[0].data[0] +*/
                response.json.response.data[0].s1 + ": " + entry.s1 + " "+" "+
            response.json.response.data[0].s2 + ": " + entry.s2);
       var point = new google.maps.LatLng(entry.lat, entry.long);

       markerLatLng.push(point);
       var loc = new google.maps.LatLng(entry.lat, entry.long);
       bounds.extend(loc);
    });

    map.fitBounds(bounds);
}

我上面有html和js，可在我的网页中显示地图数据。默认情况下，地图采用css属性position as absolute，但是当我给出固定值时，网页中仅显示地图，整个网页地图也被覆盖。当我给定的位置固定时，我可以找到带有标记的数据地图作为响应。这里的问题是什么。

最佳答案

我使用了地图容器，并生成了w idth:600px; and height:400px; with position : fixed地图。

关于html - 谷歌 map 没有显示在网页上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46168215/