Question

大家好日子。我无法弄清楚如何在MVC asp.net页面中制作这个谷歌地图API v3。

这是页码

＆＃13;

$(document).ready(function () {
    var gmarkers = [];
    var map;

    function initialize() {

        var mapProp = {
            center: new google.maps.LatLng(20.593684, 78.96288), //India Lat and Lon
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
 
});

＆＃13;

No aditional css
/*
no aditional css
*/

Javascript

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMY7Oid9t6Cb6vus9KrjfBHY0TFiiSPqA" type="text/javascript"></script>


<div class="row">
    <div class="col-md-6 text-justify" id="googleMap">
    </div>
    
    <div class="col-md-6 text-justify">
        
        <h3> Dirección</h3>
        <address>
            Parque España 2 <br />
            San Martinito <br />
            72197 Tlaxcalancingo, PUE
        </address>

        <h3>¿Cómo llegar?</h3>
        <br />
        <p>
            Sobre vía Atlixcayotl en sentido a Atlixco, después de pasar la agencia Volkswagen Angelopolis, dar vuelta casi en "U" a la derecha. Continuar derecho pasando por Fracc. Santa Cecilia, adelante encontrarán a la izquierda la entrada al Fracc. Misión de San Martinito, en esa esquina dar vuelta a la derecha, avanzando 50 metros encontrarán la entrada al estacionamiento del Club donde pueden estacionarse; nuestras instalaciones están a la derecha de la puerta principal.
        </p>
        <h3>¿Perdido?</h3>
        <p>
            Llámanos y te orientamos tel. (222)699 54 18 /Cel. 22 21 61 32 02/ 22 23 23 12 46 en la ciudad de Puebla.
        </p>
    </div>
</div>

＆＃13;

我不确定我做错了什么。

提前致谢

Answer 1

我很确定您的Google地图将正常运行，但容器div - googleMap - 的高度为0，这就是您无法看到它的原因。

尝试使用此CSS进行测试：

#googleMap { min-height:100px }

Answer 2

谢谢，这正是我所需要的：P结合这种方法使其具有可扩展性

.map_container{
    position: relative;
    width: 100%;
    height:100%;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.map_container #googleMaps {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

并在HTML中

<div class="row">
    <div class="col-md-6">
        <div class="map_container">
             <div id="googleMaps" class="map_canvas"></div>
        </div>

    </div>
    <div class="col-md-6 text-justify">
        <h3> Dirección</h3>
        <address>
            Parque España 2 <br />
            San Martinito <br />
            72197 Tlaxcalancingo, PUE
        </address>
   </div>
</div>

请不要忘记将js文件添加到包中。 enter image description here

MVC5 ASP.NET中的Google Map API

2 个答案: