如何通过点击在运行时更改图标和聚合线的颜色

时间:2011-08-15 07:20:27

标签: c# asp.net google-maps polyline

您已根据v2编辑了脚本我在使用第154行附带的脚本图片时收到此错误

GEvent.addListener(window.polyline, 'click', function() {
                                    window.polyline.setOptions(options: { strokeColor: 'blue' });

You Have edited script according to v2 i am getting this error on using that script pic attached 如何通过点击正在运行的应用程序来更改图标和折线的颜色?我的代码如下。它没有错误。我怎么能这样做?

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

namespace GoogleMap
{
    // A sample project by Ghaffar khan

    public partial class Map : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataSet1TableAdapters.LocationsTableAdapter da = new GoogleMap.DataSet1TableAdapters.LocationsTableAdapter();
            DataSet1.LocationsDataTable table = new DataSet1.LocationsDataTable();
            da.Fill(table);
            BuildScript(table);
            //GooglePolyline PL1 = new GooglePolyline();

        }
        private void BuildScript(DataTable tbl)
        {
            String Locations = "";
            foreach (DataRow r in tbl.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 + " map.addOverlay(new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";

            }

            // construct the final script
            js.Text = @"<script type='text/javascript'>
                            function initialize() {
                              if (GBrowserIsCompatible()) {
                                var map = new GMap2(document.getElementById('map_canvas'));
                                map.setCenter(new GLatLng(45.05,7.6667), 2); 
                                map.openInfoWindowHtml ( new GLatLng(45.05,7.6667), 'Serif<br>Pakistan');
                                " + Locations + @"
                                map.setUIToDefault();

// Create an array with points  
var points = [  
   new GLatLng(24.85229, 67.01703),  
   new GLatLng(24.914463, 67.0965958),  
   new GLatLng(24.86588, 67.06089),  
new GLatLng(24.9726753, 67.06638),
new GLatLng(24.840023, 67.24285),
new GLatLng(24.85229, 67.01703)
];  

// Create a new polyline  
var polyline = new GPolyline(points, '#ff0000', 5, 0.7);  

// Add the polyline to the map using map.addOverlay()  
map.addOverlay(polyline);
var marker = new GMarker(new GLatLng(45.05,7.6667))  
// 

                              }
                            }


                            </script> ";
        }       

    }
}

//////根据GergL的剧本是,///////

           js.Text = @"<script type='text/javascript'>
                            function initialize() {
                              if (GBrowserIsCompatible()) {
                                window.polyline = new GPolyline(points, '#ff0000', 5, 0.7); 
                                var map = new GMap2(document.getElementById('map_canvas'));
                                map.setCenter(new GLatLng(45.05,7.6667), 2); 
                                map.openInfoWindowHtml ( new GLatLng(45.05,7.6667), 'Serif<br>Pakistan');
                                " + Locations + @"
                                map.setUIToDefault();
google.maps.event.addListener(window.polyline, 'click', function() {
    window.polyline.setOptions(options: { strokeColor: 'blue' });
});
// Create an array with points  
var points = [  
   new GLatLng(24.85229, 67.01703),  
   new GLatLng(24.914463, 67.0965958),  
   new GLatLng(24.86588, 67.06089),  
new GLatLng(24.9726753, 67.06638),
new GLatLng(24.840023, 67.24285),
new GLatLng(24.85229, 67.01703)
];  

// Create a new polyline  
var polyline = new GPolyline(points, '#ff0000', 5, 0.7);  

// Add the polyline to the map using map.addOverlay()  
map.addOverlay(polyline);                          
                              }
                            }
google.maps.event.addListener(window.polyline, 'click', function() {
    window.polyline.setOptions(options: { strokeColor: 'blue' });
});
                            </script> ";

但是我收到了错误..。对象在第47行的脚本中,我在该行中使用click方法希望得到你的帮助!

您已根据v2编辑了脚本我在使用附带的脚本图片时收到此错误

1 个答案:

答案 0 :(得分:1)

您需要将polyline函数中的initialize()变量分配给全局可访问变量,然后使用setOptions()方法在Click事件处理程序中设置新颜色(在javascript中)。

e.g。如果您更改initialise()中的行:

var polyline = new GPolyline(points, '#ff0000', 5, 0.7);  

到此:

window.polyline = new GPolyline(points, '#ff0000', 5, 0.7); 

然后想要在点击时将其更改为蓝色,您可以添加如下代码:

GEvent.addListener(window.polyline, 'click', function() {
    window.polyline.setOptions(options: { strokeColor: 'blue' });
});

我没有测试过这个,顺便说一下。但它应该可以帮助你走上正确的轨道。

编辑:我认为你的剧本应该是: 编辑2:已更新以使用API​​ v2,但请注意Google强烈建议您在V2 documentation pageV3 documentation page上迁移到新版本。

js.Text = @"<script type='text/javascript'>
                            function initialize() {
                              if (GBrowserIsCompatible()) {
                                var map = new GMap2(document.getElementById('map_canvas'));
                                map.setCenter(new GLatLng(45.05,7.6667), 2);
                                map.openInfoWindowHtml ( new GLatLng(45.05,7.6667), 'Serif<br>Pakistan');
                                " + Locations + @"
                                map.setUIToDefault();
                                // Create an array with points  
                                var points = [  
                                   new GLatLng(24.85229, 67.01703),  
                                   new GLatLng(24.914463, 67.0965958),  
                                   new GLatLng(24.86588, 67.06089),  
                                   new GLatLng(24.9726753, 67.06638),
                                   new GLatLng(24.840023, 67.24285),
                                   new GLatLng(24.85229, 67.01703)
                                ];  

                                // Create a new polyline  
                                window.polyline = new GPolyline(points, '#ff0000', 5, 0.7);  
                                GEvent.addListener(window.polyline, 'click', function() {
                                    window.polyline.setOptions(options: { strokeColor: 'blue' });
                                });
                                // Add the polyline to the map using map.addOverlay()  
                                map.addOverlay(window.polyline);                          
                              }
                            }
                        </script> ";