google maps - трек по координатам

← →
gvozdkoff (2012-01-19 16:27) [0]

Здравствуйте, нужна помощь специалистов, возник вопрос.
работаю с компонентом TWebBrowser и выполняю со страницы Javaскрипт.
Так вот загвоздка в том что не могу до конца сочинить java скрипт который бы рисовал трек по координатам.
Вот что у меня есть.
//отрывок из сттраницы
const HTMLStr: AnsiString = "<html> "+ "<head> "+ " function DrawTrack(LatLng) { "+ //здесь я пытаюсь объявить функцию рисования трека, который строится вобщем то по координатам (чтобы был трек нужно минимум 2 координаты) " var LatLng = new google.maps.LatLng(Lat,Lang);"+ //LatLng это переменная которая теоретически содержит координаты Lat - координата северной широты Lng- координата северной широты " var Track = new google.maps.Polyline({ "+ //здесь обявляю переменную и даю ей понять что она будет треком (линией) присваиваю какие о параметры цвет , ширина линии и т.д " path: LatLng, "+ //здесь указываю откуда брать значения для переменной " strokeColor: "#FF0000", "+ " strokeOpacity: 1.0, "+ " strokeWeight: 2 "+ " });"+ " Track.setMap(map); "+ вывожу на карту

Так якобы вызываю скрипт
for i:=0 to ListView2.Items.Count -1 do begin HTMLWindow2.execScript(Format("DrawTrack(%s)",[ListView2.Selected.Caption+","+ListView2.Selected.SubItems[0]]), "JavaScript")
Координаты хранят в листитеме
Код заранее не рабочий, не доделан до конца. это чисто рассуждения, не могу понять где неправильно, подскажите пожалуйста

← →
gvozdkoff (2012-01-19 16:40) [1]

возможно Java код и рабочий, хромает реализация выдирания из листитема координат для переменной

← →
Медвежонок Пятачок © (2012-01-19 16:43) [2]

А где подключение гуглового api?

← →
Медвежонок Пятачок © (2012-01-19 16:45) [3]

Кроме того path должен быть массивом LatLng.

ЗЫ скрипт сначала надо отладить в нормальном браузере.
А не пытаться отладить одно глюкалово (скрипт) внутри другого глюкалова (своей программы)

← →
gvozdkoff (2012-01-19 17:21) [4]

> Медвежонок Пятачок © (19.01.12 16:43) [2]
> А где подключение гуглового api?

"<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> "+
"<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ru"></script> "+
//"<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> "+
"<script type="text/javascript"> "+

← →
Медвежонок Пятачок © (2012-01-19 17:27) [5]

path у полилайна должен быть массивом

← →
gvozdkoff (2012-01-19 17:29) [6]

> Медвежонок Пятачок © (19.01.12 17:27) [5]
> path у полилайна должен быть массивом

Если я правильно понял. то это объявляется так?
" var LatLng = [];"+

← →
gvozdkoff (2012-01-19 17:31) [7]

вот полностью получаемая страничка
const HTMLStr: AnsiString = "<html> "+ "<head> "+ "<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> "+ "<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ru"></script> "+ //"<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> "+ "<script type="text/javascript"> "+ " "+ " var LatLng = [];"+ " function initialize() {"+ " var myLatLng = new google.maps.LatLng(37.772323, -122.214897);"+ " var myOptions = { "+ " zoom: 3, "+ " center: myLatLng, "+ " mapTypeId: google.maps.MapTypeId.TERRAIN "+ " };"+ " "+ " var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); "+ " "+ ""+ " function DrawTrack(LatLng) { "+ " var LatLng = new google.maps.LatLng(Lat,Lang);"+ " var Track = new google.maps.Polyline({ "+ " path: LatLng, "+ " strokeColor: "#FF0000", "+ " strokeOpacity: 1.0, "+ " strokeWeight: 2 "+ " });"+ " LatLngArray.push(LatLng); "+ " Track.setMap(map); "+ ""+ ""+ " } "+ ""+"</script> "+ "</head> "+ ""+ "<body onload="initialize()"> "+ " <div id="map_canvas" style="width:100%; height:100%"></div> "+ " <div id="latlong"> "+ " <input type="hidden" id="LatValue" >"+ " <input type="hidden" id="LngValue" >"+ " </div> "+ ""+ "</body> "+ "</html> ";

← →
Медвежонок Пятачок © (2012-01-19 17:35) [8]

ну и где здесь массив?

var LatLng = new google.maps.LatLng(Lat,Lang);
var Track = new google.maps.Polyline({
path: LatLng,

Полилайну передана одна единственная точка.

← →
gvozdkoff (2012-01-19 17:41) [9]

var LatLng = new google.maps.LatLng(Lat,Lang);
var Track = new google.maps.Polyline({
path: LatLng[]

← →
Медвежонок Пятачок © (2012-01-19 17:43) [10]

Совсем ку-ку?

← →
gvozdkoff (2012-01-19 17:44) [11]

)) да похоже так. не могу сообразить

в начале объявил массив
" var LatLng = [];"+
пустой массив

← →
gvozdkoff (2012-01-19 17:45) [12]

блииин, path же будет массивом

← →
Медвежонок Пятачок © (2012-01-19 17:47) [13]

var geo_path = new Array();

geo_path.push(new google.maps.LatLng(1,2));
geo_path.push(new google.maps.LatLng(3,4));
geo_path.push(new google.maps.LatLng(5,6));
geo_path.push(new google.maps.LatLng(7,8));

var track = new google.maps.Polyline({
path: geo_path,
......

← →
Медвежонок Пятачок © (2012-01-19 17:53) [14]

совет:

не пиши программу на делфи, которая напишет программу на яваскрипте.

пиши скрипт в блокноте, и передай ему данные через json

а то, что ты делаешь очень сильно немного похоже на следующее:

в в левой руке у тебя молоток, в правой - утюг.
утюгом ты долбишь по молотку, чтобы тот забивал гвоздь, который ты держишь зубами.

← →
gvozdkoff (2012-01-19 18:08) [15]

да мне бы с этим справиться для начала, а потом оптимизировать, правильный вид придавать )
А еще вопросик, вместо

geo_path.push(new google.maps.LatLng(1,2));

можно ведь сделать запись такого вида
если переменная определена
var LatLng = new google.maps.LatLng(Lat,Lang);"+
то , получается
geo_path.push(LatLng )
или это некорректно будет
а в свою очередь LatLng будет такого типа (12.345, 76.8910) -даные из листитема

← →
gvozdkoff (2012-01-19 18:15) [16]

неее, похоже я туплю

← →
sniknik © (2012-01-19 19:38) [17]

> а потом оптимизировать, правильный вид придавать )
он говорит не про оптимизацию кода, а способа работы... разница однако.
или ты ногами ложку держишь когда ешь, а сексом занимаешься в скафандре, стоя и в гамаке?... ну типа трудности любишь. тогда продолжай писать как пишешь.

← →
sniknik © (2012-01-19 19:40) [18]

> пиши скрипт в блокноте
ну... я к примеру предпочитаю HTMLPad, а как отладчик яваскрипта мозиловксий плагин Firebug. и посоветовал бы лучше их.

← →
Медвежонок Пятачок © (2012-01-19 19:46) [19]

да не суть в общем. главное статический скрипт + данные, а не программа, пишущая текст другой программы

← →
DVM © (2012-01-19 23:26) [20]

> gvozdkoff (19.01.12 16:27)
> Здравствуйте, нужна помощь специалистов, возник вопрос.
> работаю с компонентом TWebBrowser и выполняю со страницы
> Javaскрипт.
> Так вот загвоздка в том что не могу до конца сочинить java
> скрипт который бы рисовал трек по координатам.

Очень советую поглядеть на обертку к гуглмапс апи вот от этого немца http://www.delphipraxis.net/157004-google-maps-ueber-com-component-object-model.html

← →
gvozdkoff (2012-01-20 10:52) [21]

> DVM ©

Спасибо, много интересного

← →
gvozdkoff (2012-01-20 11:05) [22]

Решил сделать так, чтобы в компонент TWebBrowser, подгружалась статическая html страница
WebBrowser1.Navigate("85.143.50.133/gps/g-m.html"); if Assigned(WebBrowser1.Document) then HTMLWindow2 := (WebBrowser1.Document as IHTMLDocument2).parentWindow;

А вот и сам код страницы
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps</title> <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var myLatLng = new google.maps.LatLng(0, -180); var myOptions = { zoom: 3, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var geo_path = new Array(); var geo_path = [ new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var Track = new google.maps.Polyline({ path: geo_path, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); Track.setMap(map); } </script> </head> <body onload="initialize()"> <div id="map_canvas"></div> </body> </html>
Получилось сделать без функции для полилайна
Скрипт работает, трек виден,
Но теперь другой вопрос, а как добавить координаты из листитема, широта и долгота хранятся в 2-ух разных столбцах.
пробовал так
for i:=0 to ListView2.Items.Count -1 do HTMLWindow2.execScript(Format("geo_path =[new google.maps.LatLng(%s,%s)])",[ListView2.Selected.Caption+","+ListView2.Selected.SubItems[0]]), "JavaScript");
при этом пишет ошибку Access violation at address

← →
gvozdkoff (2012-01-20 11:21) [23]

понимаю что ошибка в строке
HTMLWindow2.execScript(Format("geo_path =[new google.maps.LatLng(%s,%s)])",[ListView2.Selected.Caption+","+ListView2.Selected.SubItems[0]]), "JavaScript");

listview2.selected = nil or listview2.selected.subitems = nil or listview2.selected.subitems[0] = nil

← →
gvozdkoff (2012-01-20 13:10) [25]

ах тыж..., спасибо большое, то есть в строке указано для выбранных элементов, сейчас попробую выбрать весь listview2, listview2.SelectAll;

← →
gvozdkoff (2012-01-20 13:34) [26]

написал
listview2.MultiSelect:=true; listview2.SelectAll;
хм.. щас выскакивает ошибка
No argument for format %s

ну так дай ему аргумент

← →
gvozdkoff (2012-01-20 14:41) [28]

как то не получается, уже всяко разно пробовал

что тут есть аргумент для %s
Как я понял. то это одна из координат, первая -широта , вторая долгота
Так вроде и даю аргументы
Уже и так пробовал
geo_path =[%s,s])
случайно попробовал с одной %s, ошибка исчезла, но не рисуется линия никак ((

← →
gvozdkoff (2012-01-20 15:13) [29]

Уважаемые мастера, правильно ли понял,
когда есть заполненый координатами массив, то массив geo_path будет таким(выделен жирным )
var geo_path = new Array(); var geo_path = [ new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var Track = new google.maps.Polyline({ path: geo_path, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 });

А в случае если нет координат, то есть загружается стандартный google map, массив будет таким ?
var geo_path = [ new google.maps.LatLng(Lat, Lng) ];

Уже и так пробовал
geo_path =[%s,s])

А причем здесь текст скрипта?
Ошибка то не его, а делфийская. Формату твоему не хватает элемента в массиве для очередного %s

google maps - трек по координатам Найти похожие ветки