Question

我是JavaScript和CSS的新手。我想在我的一个div中显示地图。除非我使用最小高度和最小宽度（地图以全屏显示）或高度和宽度（地图在半屏幕中）到500px，否则我在div中没有看到任何地图。

以下是我的代码段。

HTML代码：

<head>
    <title>My Location</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/HtmlApp/css/myStyle.css">
    <script type="text/javascript" src="/HtmlApp/js/myLoc.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBaPDmn6Z_TdZDjhgbcBQ3ksLG7zw0sGaE"></script>
</head>
<body>
    <div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div id="location" class="div1">
                Your Location will go here.
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div id="distance" class="div2">
                Distance from WickedlySmart HQ will go here.
            </div>
        </div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div id="map" class="div3">
                Your map will go here.
            </div>
        </div>
    </div>
</body>

JavaScript：

window.onload = getMyLocation;

function getMyLocation() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayLocation, displayError);
    } else {
        alert("Oops! no geo location supports..");
    }
}

function displayLocation(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var location = document.getElementById("location");
    location.innerHTML = "You are at Latitude : " + latitude + " , Longitude : " + longitude;

    var km = computeDistance(position.coords, ourCoords);
    var distance = document.getElementById("distance");
    distance.innerHTML = "You are " + km + " km's from your home town";

    showMap(position.coords);
}

function displayError(error) {
    var errorTypes = {
        0: "Unknown Error",
        1: "Permission Denied by User",
        2: "position is not available",
        3: "Request Timed out"
    };

    var errorMessage = errorTypes[error.code];

    if(error.code == 0 || error.code ==2) {
        errorMessage = errorMessage + " " + error.message;
    }   

    var location = document.getElementById("location");
    location.innerHTML = errorMessage;
}

//Ready bake code

function computeDistance(startCoords, destCoords) {
    var startLatRads = degreesToRadians(startCoords.latitude);
    var startLongRads = degreesToRadians(startCoords.longitude);
    var destLatRads = degreesToRadians(destCoords.latitude);
    var destLongRads = degreesToRadians(destCoords.longitude);
    var Radius = 6371; // radius of the Earth in km
    var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLongRads - destLongRads)) * Radius;
return distance;
}

function degreesToRadians(degrees) {
    var radians = (degrees * Math.PI)/180;
return radians;
}

//end of ready bake code



var ourCoords = {
latitude: 47.624851,
longitude: -122.52099
};


var map;

function showMap(coords) {
    var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude);
    var mapOptions = {
        zoom: 10,
        center: googleLatAndLong,
        mapTypeId: google.maps.MapTypeId.ROADMAP  //we can also try SATELITE and HYBRID-->SATELITE Is the default view for HYBRID.
    };

    var mapDiv = document.getElementById("map");
    map = new google.maps.Map(mapDiv, mapOptions);  
}

CSS：

.div1, .div2{
            border: 1px solid;
            border-color: red;
            background-color: #d4d4f5;
            font-weight: : bold;
            margin: 1px;
        }
.div3 {
    position: relative;
    float: center;
    border: 1px solid black;
    border-color: red;
    min-height: 500px;
    min-width: 500px;
}
.container {
    position: relative;
     height: 100%;
     width: 100%;
}

jsfiddle链接：

https://jsfiddle.net/narasimha1805/2w3mrmrd/

没有min-height和min-width属性，无法在div中看到地图

0 个答案: