Как изменить цвет значка и полилинии во время выполнения с помощью клика

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

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

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

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

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


person Syed Raza    schedule 15.08.2011    source источник


Ответы (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> ";
person GregL    schedule 15.08.2011
comment
Где я должен добавить этот код для функции щелчка??? либо в моем сценарии, либо в коде?? - person Syed Raza; 15.08.2011
comment
Либо. Предположительно, вы используете буквальный элемент управления на странице в данный момент для отображения вашего javascript, который будет работать, но это не лучший способ сделать это. Функция щелчка, как и все взаимодействия с javascript API Google Maps, очевидно, выполняется в Javascript. Лучшее место для вас — добавить последние 3 строки кода в мой ответ сразу после первой строки кода в моем ответе (т.е. в вашем коде). Я был прав в своем предположении, что вы хотели, чтобы полилиния меняла цвет при нажатии на нее? - person GregL; 15.08.2011
comment
Когда я говорю «Либо», я имею в виду, что вы можете либо использовать свой код для рендеринга javascript, как вы уже делаете, либо у вас может быть отдельная функция, которую вы определяете, скажем, файл javascript, который вы включаете на свою страницу, а затем рендерите вызов этой функции из кода позади. Имеет ли это смысл? - person GregL; 15.08.2011
comment
вы правы, я хочу изменить значок и цвет полилинии при нажатии, не имеет значения, откуда функция будет вызывать либо из кода, либо со страницы aspx - person Syed Raza; 16.08.2011
comment
теперь мой сценарий в соответствии с вашей помощью изменился на этот сценарий, как я уже упоминал в своем вопросе, я отредактировал свой пост и упомянул там, пожалуйста, смотрите выше! - person Syed Raza; 16.08.2011
comment
Я отредактировал свой ответ на то, каким, по моему мнению, должен быть ваш код. Обратите внимание, что я добавляю слушателя (подумайте об обработчике события клика в Javascript) после того, как я инициализирую переменную window.polyline. - person GregL; 16.08.2011
comment
@ Сайед Раза, я только что заметил, что использую синтаксис API v3 в своем ответе. Теперь я обновил свой ответ для работы с API v2, хотя я призываю вас следовать совету Google и по возможности переходить на использование V3. - person GregL; 17.08.2011
comment
я получаю сообщение об ошибке, используя этот скрипт в строке списка добавления Gevent. У меня есть прикрепленная картинка в моем первом сообщении, а строка 154 относится к строке списка списка Gevent, которая вызывает ошибку :( - person Syed Raza; 17.08.2011
comment
Я не уверен, что это действительно ошибка. К сожалению, номера строк в IE часто неверны. У вас есть Firefox и Firebug? Если да, показывает ли консоль в Firebug какие-либо ошибки? Я не могу найти место в моем скрипте, где отсутствуют правильные скобки. - person GregL; 19.08.2011