0

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

但是现在，由于我一直在尝试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;
        }
    }
}

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

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

1 回答 1

1

您只是map.panTo()在创建标记后不写，您需要使用标记的单击事件，您应该在其中编写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() + @"); 
}

以上将帮助您解决您的问题。

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

现场演示

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

于 2013-02-07T06:15:08.167 回答