在 mvc razor 中将谷歌地图与标记集成

问题描述 投票:0回答:1

我已经给出了谷歌地图,并给出了两个纬度和经度文本框。目前,运行应用程序时,Google 地图和标记可见。但我的问题是,当单击或拖动标记时,更改的纬度和经度在文本框中不可见。并显示未定义标记的 java 脚本错误。

javascript asp.net-mvc google-maps razor google-maps-api-3
1个回答
0
投票

我重新创建了您的设置,您可以执行以下操作:

调用 Google Maps Javascript API 时添加回调参数。并且请不要在此处或任何人可以滥用它的任何公共区域发布您的 API 密钥。

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

将 window.onload 更改为指定的回调函数

initMap
并在其中包含您的侦听器。这样,当我们获取 Google Maps Javascript API 时,它会在确保您的 Maps 对象不会未定义后立即调用
initMap()

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);
 });
}

这是一个不使用 Razor 语法的工作示例,因此您可以看到它单独工作:

/* 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>
        <input type="text" id="Lat">
        <input type="text" id="Long">
        <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&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
    });
        
            //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);

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

这是一个外部链接,显示它如何在 .NETFiddle 中工作 忽略控制器和模型。

希望这有帮助!

© www.soinside.com 2019 - 2024. All rights reserved.