intégrer google map avec marqueur dans mvc rasoir

Je fais un projet et en cela j'ai besoin d'intégrer google map. J'ai donné google map et j'ai donné deux zones de texte pour la latitude et la longitude. Actuellement, lors de l'exécution de l'application Google map et le marqueur est visible. Mais mon problème est que lorsque vous cliquez ou faites glisser le marqueur, la latitude et la longitude modifiées ne sont pas visibles dans la zone de texte. Et montrant une erreur de script Java ce marqueur n'est pas défini.intégrer google map avec marqueur dans mvc rasoir

vue

<div class="col-lg-7" id="dvMap" style="height:250px;"> </div> 

<div class="form-group"> 
     <div class="col-lg-9 col-md-8"> 
      @Html.EditorFor(model => model.Lat, new { htmlAttributes = new { @class = "form-control", @placeholder = "Latitude" } }) 
      @Html.ValidationMessageFor(model => model.Lat, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-lg-9 col-md-8"> 
      @Html.EditorFor(model => model.Long, new { htmlAttributes = new { @class = "form-control", @placeholder = "Longitude" } }) 
      @Html.ValidationMessageFor(model => model.Long, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

</div> 


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=MY_API_KEY"></script> 

<script type="text/javascript"> 
     window.onload = function() { 
    //map.. 
    var map = new google.maps.Map(document.getElementById('dvMap'), { 
     center: { 
      lat: 10.9968683, 
      lng: 76.00882 
     }, 
     zoom: 15 
    }); 
    //marker.. 
    var marker = new google.maps.Marker({ 
     position: { 
      lat: 10.9968683, 
      lng: 76.00882 
     }, 
     map: map, 
     draggable: true 
    }); 
} 
//dragend event of marker 
google.maps.event.addListener(marker,'dragend', function() { 
    var Lats = marker.getPosition().lat(); 
    var Longs = marker.getPosition().lng(); 

    $('#Lat').val(Lats); 
    $('#Long').val(Longs); 
});

comment puis-je résoudre le problème ?? quelqu'un peut-il m'aider s'il vous plaît à trouver une solution ??

Source

2017-09-29 user355

Je recréés votre configuration et voici quelques choses que vous pouvez faire:

Ajouter un rappel de param lorsque vous appelez la Google Maps API Javascript. Et s'il vous plaît ne pas poster votre clé API ici ou dans un espace public où n'importe qui peut en abuser.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_API_KEY&callback=initMap"

Modifier la window.onload à la fonction de rappel du nom initMap et inclut également là votre interlocuteur. C'est ainsi que lorsque nous récupérons l'API Javascript de Google Maps, il appelle le initMap() juste après s'être assuré que votre objet Maps ne sera pas indéfini.

function initMap() { 
//map.. 
var map = new google.maps.Map(document.getElementById('dvMap'), { 
    center: { 
     lat: 10.9968683, 
     lng: 76.00882 
    }, 
    zoom: 15 
}); 
//marker.. 
var marker = new google.maps.Marker({ 
    position: { 
     lat: 10.9968683, 
     lng: 76.00882 
    }, 
    map: map, 
    draggable: true 
}); 

//dragend event of marker 
google.maps.event.addListener(marker,'dragend', function() { 
    var Lats = marker.getPosition().lat(); 
    var Longs = marker.getPosition().lng(); 
    $('#Lat').val(Lats); 
    $('#Long').val(Longs); 
}); 
}

Voici un exemple de travail sans utiliser la syntaxe Razor afin que vous puissiez le voir travailler seul:

 /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Simple Map</title> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta charset="utf-8"> 
 
    </head> 
 
    <body> 
 
    <div id="dvMap" style="height:250px;"></div> 
 
\t \t <input type="text" id="Lat"> 
 
\t \t <input type="text" id="Long"> 
 
\t \t <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAZVylT7o5OxdosVfh-IVONHoaA0cpN5VI&callback=initMap" async defer></script> 
 
<script type="text/javascript"> 
 
    function initMap() { 
 
    //map.. 
 
    var map = new google.maps.Map(document.getElementById('dvMap'), { 
 
     center: { 
 
      lat: 10.9968683, 
 
      lng: 76.00882 
 
     }, 
 
     zoom: 15 
 
    }); 
 
    //marker.. 
 
    var marker = new google.maps.Marker({ 
 
     position: { 
 
      lat: 10.9968683, 
 
      lng: 76.00882 
 
     }, 
 
     map: map, 
 
     draggable: true 
 
    }); 
 
\t \t 
 
\t \t \t //dragend event of marker 
 
google.maps.event.addListener(marker,'dragend', function() { 
 
    var Lats = marker.getPosition().lat(); 
 
    var Longs = marker.getPosition().lng(); 
 

 
    $('#Lat').val(Lats); 
 
    $('#Long').val(Longs); 
 

 
}); 
 
} 
 
\t \t </script> 
 
    </body> 
 
</html>

Voici un lien externe montrant comment il pourrait fonctionner dans un .NETFiddle Ignorer la contrôleur et modèle.

Espérons que cela aide!

Source

2017-10-02 09:26:34 henrisycip

Après votre avertissement sévère au sujet d'un abus possible des clés API, dont la clé API vous avez cité dans votre extrait de carte simple ci-dessus? :) – oflahero

Oh c'est une clé API restreinte pour les sites stackoverflow et fiddle uniquement. Il ne peut pas être utilisé avec autre chose :) – henrisycip

intégrer google map avec marqueur dans mvc rasoir

Répondre

Questions connexes