Question

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：

控制器部分：

// Google地图

$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在我的网页上显示我的地图数据。默认情况下，map采用css属性position as absolute但是当我给出固定时，我的网页中只显示地图，这也涵盖了整个网页地图。当我给出固定的位置时，我可以找到带有响应的数据标记的地图。这将是什么问题。

Answer 1

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

谷歌地图不在网页上显示

1 个答案: