Как изменить цвет иконки и линии Poly во время выполнения, нажав

Question

Вы отредактировали скрипт в соответствии с v2. Я получаю эту ошибку при использовании этого скрипта, прикрепленного к строке 154

.

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

Как мы можем изменить цвет значка и полилинии, нажав на запущенное приложение? Мой код выглядит следующим образом. Это не имеет ошибки. Как я могу это сделать?

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> ";
        }       

    }
}

////// Сценарий по Герглю, ///////

           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 скрипта, где я использую метод щелчка в этой строке, надеется на вашу помощь!

Вы отредактировали скрипт в соответствии с версией v2. Я получаю эту ошибку при использовании этого скрипта.

Answer 1

Вам необходимо присвоить переменную polyline в функции initialize() глобально доступной переменной, а затем использовать метод setOptions() для нее, чтобы установить новый цвет в обработчике событий щелчка (в JavaScript).

например. если вы изменили строку в 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 настоятельно рекомендует перейти на новый V3 как на странице документации V2 , так и на странице документации V3 .

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> ";