Question

我有一张地图，我正在绘制一些随机坐标，坐标被输入数据表并且工作正常

但是现在我已经尝试在地图上设置panTo缩放功能，以便在单击任何一个标记时，地图画布会慢慢放大到标记。我无法正确设置。

那么，我怎样才能做到这一点？任何建议/答案都非常感谢..谢谢。

我的GPSLib课程：

public static class GPSLib
{
    public static String PlotGPSPoints(DataTable tblPoints)
    {
        try
        {
            String Locations = "";
            String sJScript = "";
            int i = 0;
            foreach (DataRow r in tblPoints.Rows)
            {
                // bypass empty rows 
                if (r["latitude"].ToString().Trim().Length == 0)
                    continue;

                string Latitude = r["latitude"].ToString();
                string Longitude = r["longitude"].ToString();

                // create a line of JavaScript for marker on map for this record 
                Locations += Environment.NewLine + @"
                path.push(new google.maps.LatLng(" + Latitude + ", " + Longitude + @"));

                var marker" + i.ToString() + @" = new google.maps.Marker({
                    position: new google.maps.LatLng(" + Latitude + ", " + Longitude + @"),
                    title: '#' + path.getLength(),
                    map: map
                });";
                i++;
            }

            // construct the final script
            // var cmloc = new google.maps.LatLng(33.779005, -118.178985);

            // map.panTo(curmarker.position); //zooming on current marker's posn.
            // map.panTo(myOptions.getPosition());
            sJScript = @"<script type='text/javascript'>

            var poly;
            var map;

            function initialize() {
                var cmloc = new google.maps.LatLng(28.483243, 77.107624);
                var myOptions = {
                    zoom: 19,
                    center: cmloc,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);


                var polyOptions = {
                    strokeColor: 'blue',
                    strokeOpacity: 0.5,
                    strokeWeight: 3
                }
                poly = new google.maps.Polyline(polyOptions);
                poly.setMap(map);

                var path = poly.getPath();

               " + Locations + @"

                    }
                </script>";
            return sJScript;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
}

这是aspx页面的onLoad()方法，它创建一个包含坐标的数据表：

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("Latitude"));
            dt.Columns.Add(new DataColumn("Longitude"));

            DataRow row = dt.NewRow();
            row["Latitude"] = 28.483109;
            row["Longitude"] = 77.107756;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 28.483243;
            row["Longitude"] = 77.107624;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 28.483293;
            row["Longitude"] = 77.107579;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 28.483359;
            row["Longitude"] = 77.107536;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Latitude"] = 28.483559;
            row["Longitude"] = 77.107273;
            dt.Rows.Add(row);

            //row = dt.NewRow();
            //row["Latitude"] = 28.4804;
            //row["Longitude"] = 77.1251;
            //dt.Rows.Add(row);

            js.Text = GPSLib.PlotGPSPoints(dt); ;
        }
    }

Answer 1

创建标记后你只是不写map.panTo()，你需要使用标记的click事件，你应该在其中写panTo()。

在你的foreach循环之后，写下：

function myMark(rmarker)
{
    google.maps.event.addListener(rmarker,'click',function(){
      map.panTo(rmarker.getPosition());
    });
}

最后在foreach循环中调用上面的函数：

var marker" + i.ToString() + @" = new google.maps.Marker({
                    position: new google.maps.LatLng(" + Latitude + ", " + Longitude + @"),
                    title: '#' + path.getLength(),
                    map: map
                });";
                i++;
 myMark(marker" + i.ToString() + @"); 
}

以上内容可以帮助您解决问题。

更新：这是一个展示您功能的工作演示：

LIVE DEMO

查看编码模式，你应该善于纠正错误。

如何在点击标记时设置panTo自动缩放？

1 个答案: