Question

此代码保存当前位置的经度和纬度..我需要知道我将如何应用搜索按钮来查找不同位置以保存其经度和纬度

     <script type="text/javascript">
         var long = 0;
         var lat = 0;
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(function (p) {
                 var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
                 var mapOptions = {
                     center: LatLng,
                     zoom: 13,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                 };
                 var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
                 var marker = new google.maps.Marker({
                     position: LatLng,
                     map: map,
                     title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
                 });
                 google.maps.event.addListener(marker, "click", function (e) {
                     var infoWindow = new google.maps.InfoWindow();
                     infoWindow.setContent(marker.title);
                     infoWindow.open(map, marker);
                     long = e.latLng.lng();
                     lat = e.latLng.lat();
                     document.getElementById("lat").value = lat;
                     document.getElementById("lng").value = long;
                 });
             });
             google.maps.event.addDomListener(window, 'load', function () {
                 var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
                 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);
                 });
             });

         } else {
             alert('Geo Location feature is not supported in this browser.');
         }
</script>




    <form id="form1" runat="server">


<div id="dvMap" style="width: 800px; height: 600px">
   </div>
   <asp:HiddenField ID="lat" ClientIDMode="Static" runat="server" />
   <asp:HiddenField ID="lng" ClientIDMode="Static" runat="server" />

   <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />


        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <span>Location:</span>
    <input type="text" id="txtPlaces" style="width: 250px" />

    </form>
</body>
</html>

服务器端代码::

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {

         Double latitude = Convert.ToDouble(lat.Value);
        Double longitude = Convert.ToDouble(lng.Value);
            string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
            SqlConnection con = new SqlConnection(constr);


        string query1 = "insert into tbl(longi,lati) values (@lati, @longi)";

        SqlCommand cmd1 = new SqlCommand(query1, con);
        cmd1.Parameters.AddWithValue("@lati", latitude);
        cmd1.Parameters.AddWithValue("@longi", longitude);

                con.Open();

                cmd1.ExecuteNonQuery();


                con.Close();    
    }

    }

Answer 1

以下示例演示了如何搜索地点并保存其位置：

＆＃13;

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    
    var input = document.getElementById('searchbox');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    var searchBox = new google.maps.places.SearchBox(input);


    google.maps.event.addListener(searchBox, 'places_changed', function() {
        var places = searchBox.getPlaces();

        if (places.length == 0) {
            return;
        }

        //get first place
        var place = places[0];

        var marker = new google.maps.Marker({
            map: map,
            title: place.name,
            position: place.geometry.location
        });

        //var bounds = new google.maps.LatLngBounds();
        //bounds.extend(place.geometry.location);
        //map.fitBounds(bounds);

        map.fitBounds(place.geometry.viewport);


        //save location goes here...
        var lat = place.geometry.location.lat();
        var lng = place.geometry.location.lng();
        document.getElementById('latbox').value = (lat);
        document.getElementById('lngbox').value = (lng);


    });
}
initialize();

＆＃13;

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places" type="text/javascript"></script>
   
<input type="text" value="Lat:" id="latbox">
<input type="text" value="Lng:" id="lngbox">
<br/>
<input id="searchbox" type="text" placeholder="Search Box">
<div id="map-canvas" style="width: 480px; height: 320px;"></div>

＆＃13;

如何在asp.net中的谷歌地图中实现搜索位置框

1 个答案: