Question

我真的很擅长使用Google Map API。我想使用Google Map API创建一个Asp.Net项目。在这里，我可以通过从我的数据库填充地图来显示所需的位置。但是我在更改在文本框中输入的地图中心时遇到了困难。我可以动态获得纬度和地址的经度，并根据文本框将我的图像标记放在地图上。但它并没有改变地图的中心。

这是我的aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main2.aspx.cs" Inherits="Asp_GMap.Main2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Show/Add multiple markers to Google Maps from database in asp.net 
website</title>
    <style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDC0pSCu_15c1krbw5yoRnU51uIie6j8K4&sensor=false">
</script>
<script type="text/javascript">

    var latitude = 22.347537;
    var longitude = 91.812332;
    function initialize() {



        var value="";
        var latitude = 22.347537;
        var longitude = 91.812332;
        var mymap;
        var img = 'Images/position.png';
        var mapOptions;
        value = document.getElementById('<%=TextBox1.ClientID %>').value;
        var address = value;

                           //////////to show ATM booth
        var markers = JSON.parse('<%=DataTableLoading() %>');

        if (value != "") {



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

            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    latitude = results[0].geometry.location.lat();
                    longitude = results[0].geometry.location.lng();

                    var marker = new google.maps.Marker({
                        position: { lat: latitude, lng: longitude },
                        map: map,
                        title: "I am here",
                        Icon: img
                    });

                }
            });
        }


 mapOptions = {
     center: new google.maps.LatLng(latitude, longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
//  marker:true
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), 
mapOptions);

for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);


         var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: data.title
    });



(function(marker, data) {

// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.Description);
infoWindow.open(map, marker);
});
})(marker, data);
}
    }

</script>



</head>
<body onload="initialize()">
    <form id="form1" runat="server">
    <div>
        <span>Location:</span>

        <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox> <br /><br 
/>
         <asp:Button ID="Button1_SeachAddress" runat="server" Text="Button" 
OnClientClick="initialize()"  />
    <div id="map_canvas" style="width: 1000px; height: 500px"></div>
    </div>
    </form>
</body>
</html>

这是我的代码背后......

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

namespace Asp_GMap
{
    public partial class Main2 : System.Web.UI.Page
    {
        string CS = 
ConfigurationManager.ConnectionStrings["DBCON_STRING"].ConnectionString;
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        public string DataTableLoading()
            {
                DataTable dt = new DataTable();
                using ( SqlConnection con = new SqlConnection(CS) )
            {
                using (SqlCommand cmd = new SqlCommand("select title=City,lat=Latitude,lng=Longitude,Street,Description from AtmAddress", con))
                {
                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                    System.Web.Script.Serialization.JavaScriptSerializer serializer= new System.Web.Script.Serialization.JavaScriptSerializer();
                    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                    Dictionary<string, object> row;
                    foreach (DataRow dr in dt.Rows)
                    {
                        row = new Dictionary<string, object>();
                        foreach (DataColumn col in dt.Columns)
                        {
                            row.Add(col.ColumnName, dr[col]);
                        }
                        rows.Add(row);
                    }
                    return serializer.Serialize(rows);
                }
            }
        }


    }
}

请你帮我找一个合适的解决方案来解决我的代码中的问题。

Answer 1

您需要使用panTo自己居中地图。

<script type="text/javascript">
    function centerMap(lat, lng) {
        var location = new google.maps.LatLng(lat, lng);
        map.panTo(location);
    }
</script>

https://developers.google.com/maps/documentation/javascript/reference

还有一种名为setCenter的东西。没有经过测试，但我猜测它也是地图的中心，但没有滚动。

无法根据文本框

1 个答案: