谷歌地图没有在剃刀中呈现

Question

我已按照 Nava 的建议从 mapCanvas css 中删除了左侧浮动：

#mapCanvas {
    width: 500px;
    height: 400px;
    /*float: left;*/
}

我还在视图末尾删除了对 jQuery 的第二个引用...

#mapCanvas {
  width: 500px;
  height: 400px;
  float: left;
}
#infoPanel {
  float: left;
  margin-left: 10px;
}
#infoPanel div {
  margin-bottom: 5px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
@model PetBookMVC2.Models.LostAndFound @{ ViewBag.Title = "Registrar Mascota Extraviada"; }

<h2>@ViewBag.Title</h2>
<div class="alert alert-info" hidden="hidden">@ViewBag.Message</div>

@using (Html.BeginForm("Create", "LostAndFounds", null, FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.AntiForgeryToken()

<div class="form-horizontal col-md-6">
  <h4>Ingrese los datos de su mascotita extraviada...</h4>
  <hr />@Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.HiddenFor(model => model.IdPet) @Html.HiddenFor(model => model.IdUser)


  <div class="form-group">
    @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
      @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control", @placeholder = "Ingrese una Título" } }) @*@Html.ValidationMessageFor(model => model.Notes, "Título de su anuncio de Mascota Extraviada", new { @class = "text-danger"
      })*@
    </div>
  </div>

  <div class="form-group">
    @Html.LabelFor(model => model.DateLost, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
      @Html.TextBoxFor(model => model.DateLost, new { @class = "form-control datepicker", placeholder = "Ingrese fecha de extravio..." }) @*@Html.ValidationMessageFor(model => model.DateLost, "", new { @class = "text-danger" })*@
    </div>
  </div>

  <div class="form-group">
    @Html.LabelFor(model => model.Latitude, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
      @Html.EditorFor(model => model.Latitude, new { htmlAttributes = new { @class = "form-control", @id = "latbox" } }) @*@Html.ValidationMessageFor(model => model.Latitude, "Debe ingresar la Latitud", new { @class = "text-danger" })*@
    </div>
  </div>

  <div class="form-group">
    @Html.LabelFor(model => model.Longitude, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
      @Html.EditorFor(model => model.Longitude, new { htmlAttributes = new { @class = "form-control", @id = "lngbox" } }) @*@Html.ValidationMessageFor(model => model.Longitude, "Debe ingresar la Longitud", new { @class = "text-danger" })*@
    </div>
  </div>

  <div class="form-group">
    @Html.LabelFor(model => model.Contact1, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
      @Html.EditorFor(model => model.Contact1, new { htmlAttributes = new { @class = "form-control", @placeholder = "Teléfono de Contacto" } }) @*@Html.ValidationMessageFor(model => model.Notes, "Ingrese un teléfono de contacto", new { @class = "text-danger"
      })*@
    </div>
  </div>

  <div class="form-group">
    @Html.LabelFor(model => model.Contact2, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
      @Html.EditorFor(model => model.Contact2, new { htmlAttributes = new { @class = "form-control", @placeholder = "Teléfono de Contacto" } }) @*@Html.ValidationMessageFor(model => model.Notes, "Ingrese un teléfono de contacto", new { @class = "text-danger"
      })*@
    </div>
  </div>

  <div class="form-group">
    @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
      @Html.EditorFor(model => model.Notes, new { htmlAttributes = new { @class = "form-control", @placeholder = "Ingrese una referencia" } }) @*@Html.ValidationMessageFor(model => model.Notes, "Debe ingresar una referencia", new { @class = "text-danger" })*@
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <input type="submit" value="Grabar" class="btn btn-default" />
    </div>
  </div>

  @Html.ActionLink("Regresar al Listado", "Index")

</div>

}

<div class="row">
  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <b>Estado del Marcador</b>
    <div id="markerStatus"><i>Haga Click y arrastre el marcador</i>
    </div>
    <b>Posicion actual</b>
    <div id="info"></div>
    <div id="lat"></div>
    <div id="lng"></div>
    <b>Dirección más cercana</b>
    <div id="address"></div>
  </div>
</div>

@section Scripts { @Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script type="text/javascript">
  $(function() { // will trigger when the document is ready
    $('.datepicker').datepicker({
      format: 'dd/mm/yyyy'
    }); //Initialise any date pickers
    initialize();
  });


  var geocoder = new google.maps.Geocoder();


  function geocodePosition(pos) {
    geocoder.geocode({
      latLng: pos
    }, function(responses) {
      if (responses && responses.length > 0) {
        updateMarkerAddress(responses[0].formatted_address);
      } else {
        updateMarkerAddress('No se puede determinar la dirección de esta ubicación');
      }
    });
  }

  function updateMarkerStatus(str) {
    document.getElementById('markerStatus').innerHTML = str;
  }

  function updateMarkerPosition(latLng) {
    document.getElementById('info').innerHTML = [
      latLng.lat(),
      latLng.lng()
    ].join(', ');

    document.getElementById('lat').innerHTML = latLng.lat();
    document.getElementById('lng').innerHTML = latLng.lng();

    //document.getElementById('latbox').innerHTML = latLng.lat();
    //document.getElementById('lngbox').innerHTML = latLng.lng();
  }

  function updateMarkerAddress(str) {
    document.getElementById('address').innerHTML = str;
  }

  function initialize() {

    var latLng = new google.maps.LatLng(-12.0711893, -77.0698524);
    var map = new google.maps.Map(document.getElementById('mapCanvas'), {
      zoom: 17,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        latLng = pos;
        map.setCenter(pos);

      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      handleLocationError(false, infoWindow, map.getCenter()); // Browser doesn't support Geolocation
    }


    var marker = new google.maps.Marker({
      position: latLng,
      title: 'Por acá se perdió mi mascotita',
      map: map,
      draggable: true
    });

    // Update current position info.
    updateMarkerPosition(latLng);
    geocodePosition(latLng);


    // Add dragging event listeners.
    google.maps.event.addListener(marker, 'dragstart', function() {
      updateMarkerAddress('Arrastrando...');
    });

    google.maps.event.addListener(marker, 'drag', function() {
      updateMarkerStatus('Arrastrando...');
      updateMarkerPosition(marker.getPosition());
    });

    google.maps.event.addListener(marker, 'dragend', function() {
      updateMarkerStatus('Arrastre finalizado');
      geocodePosition(marker.getPosition());
    });

  }

  // Onload handler to fire off the app.
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
}

您好，我一直在尝试使此代码在我的 Mvc 网络中运行，但我找不到不渲染的原因。我在一个新项目中有完全相同的代码，它工作正常，但在我的项目中却不行。

这是我的代码...我发现与该项目的唯一区别是 JavaScript 版本 1.10.2 与我实际使用的 2.2.1。即使在这个 sn-p 中，代码也能正常工作……我疯了！

Answer 1

您将网址包含在您的网站中，我看了看。当您尝试创建 google.maps.Map 时，您似乎遇到了 Javascript 错误。

这是我开始调查的地方。

附带说明，您包含 jQuery 两次，但 /Scripts/jquery-1.10.2.min.js 返回 404。