如何使用 asp.net 中的文本框制作谷歌地图答案

【问题标题】：How to make Google map with to and from text boxes in asp.net如何使用 asp.net 中的文本框制作谷歌地图
【发布时间】：2015-04-15 07:00:24
【问题描述】：

此代码显示自动完成地址，但我想在地图上显示它们。
我想在我的 asp.net 页面上添加 Google 地图，方法是从自动完成文本框中获取 From 和 To 地址。

请帮帮我。

<script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            var places2 = new google.maps.places.Autocomplete(document.getElementById('txtPlaces2'));
            google.maps.event.addListener(places,places2, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.k;
                var longitude = place.geometry.location.D;
                var mesg = "Address: " + address;
                mesg += "\nLatitude: " + latitude;
                mesg += "\nLongitude: " + longitude;
               // alert(mesg);
            });
        });
       
</script>

<span>Location 1:</span>
<input type="text" id="txtPlaces" style="width: 250px" /><br /><br />
<span>Location 2:</span>
<input type="text" id="txtPlaces2" style="width: 250px" />

【问题讨论】：

显示一些代码伙伴！你试过什么？？？

标签： javascript asp.net google-maps asp.net-mvc-4

【解决方案1】：

您的addListener 呼叫似乎无效。第二个参数必须是事件，在这里你传递一个 dom 元素。所以我建议进行以下更改（未经我测试）：

var from = null;
var to = null;

google.maps.event.addListener(places, 'place_changed', function() {
    from = places.getPlace();
});
google.maps.event.addListener(places2, 'place_changed', function() {
    to = places2.getPlace();
});

document.getElementById("submit").addEventListener("click", function() {
    if(from == null) {
        alert("You have to select an origin");
    } else {
        if(to == null) {
            alert("You have to select a destination");
        } else {
            var start = from.geometry.location;
            var end = to.geometry.location;
            //Render the direction
        }
    }
});

【讨论】：

你能帮我在谷歌地图上使用lat，long从我有的文本框中绘制从第一个地址到第二个地址的路线
您要方向指示还是只需要路线？
只使用我的文本框中的 lat long 路由
已经有一个关于 SO 的帖子：http://stackoverflow.com/q/5959788/4682796
有没有办法限制用户不输入地址，除非自动完成文本框中的谷歌建议。这是我的问题

【解决方案2】：

检查this autocomplete gmap example 及其javascript 和html 代码。如果您愿意，可以使用 asp net 工具轻松更改它们。 this autocomplete example 也填写地址表格。这是the documentation for auto compete 用于谷歌地图。您可以了解属性的工作原理。我建议您使用 google 的示例。

【讨论】：

【解决方案3】：

         <html xmlns="http://www.w3.org/1999/xhtml">

           <body>
           <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>


           <script type="text/javascript">
             google.maps.event.addDomListener(window, 'load', function () {
             var places = new google.maps.places.Autocomplete(document.getElementById('txtfromaddress'));
             google.maps.event.addListener(places, 'place_changed', function () {
             var place = places.getPlace();
             var address = place.formatted_address;
             var latitude = place.geometry.location.k;
             var longitude = place.geometry.location.D;
             var mesg = "Address: " + address;
             mesg += "\nLatitude: " + latitude;
             mesg += "\nLongitude: " + longitude;
             alert(mesg);
             });
             });
          </script>

            <script type="text/javascript">
              google.maps.event.addDomListener(window, 'load', function () {
              var places = new google.maps.places.Autocomplete(document.getElementById('txttoaddress'));
              google.maps.event.addListener(places, 'place_changed', function () {
              var place = places.getPlace();
              var address = place.formatted_address;
              var latitude = place.geometry.location.k;
              var longitude = place.geometry.location.D;
              var mesg = "Address: " + address;
              mesg += "\nLatitude: " + latitude;
              mesg += "\nLongitude: " + longitude;
              alert(mesg);
              });
              });
           </script>
    <asp:Label id="lblfromaddress " runat="server"></asp:Label>
  <asp:TextBox id="txtfromaddress"  Runat="server" ></asp:TextBox>

  <asp:Label id="lbltoaddress " runat="server"></asp:Label>
  <asp:TextBox id="txttoaddress"  Runat="server" ></asp:TextBox>

在代码后面使用（C#）：

lblfromaddress .Text = "来自地址";

lbltoaddress .Text = "地址";

【讨论】：