Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] mapa google - jak wyświetlić dwie linie na jednej mapie..?
Norbit_24
post 27.01.2011, 19:19:08
Post #1





Grupa: Zarejestrowani
Postów: 163
Pomógł: 2
Dołączył: 7.03.2009

Ostrzeżenie: (0%)
-----

Witam,

Chce wyświetlić na mapie dwie linie, czerwoną i niebieską. A wyświetla się tylko czerwona. Jak wyświetlić obie linie na jednej mapie..?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  3.   <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  5.     <title>Mapa GoogleAPI</title>
  6.     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  7.     <script type="text/javascript">
  8.  
  9.       function initialize() {
  10.         var mapDiv = document.getElementById('map-canvas');
  11.         var map = new google.maps.Map(mapDiv, {
  12.           center: new google.maps.LatLng(52.397672,20.920736),
  13.           zoom: 10,
  14.           mapTypeId: google.maps.MapTypeId.ROADMAP
  15.         });
  16.         var path = [new google.maps.LatLng(52.387913, 20.928782),
  17.           new google.maps.LatLng(52.392660, 20.921722),
  18.           new google.maps.LatLng(52.394487, 20.920113),
  19.           new google.maps.LatLng(52.394672, 20.920736),
  20.           new google.maps.LatLng(52.396490, 20.919432),
  21.           new google.maps.LatLng(52.396352, 20.919061),
  22.           new google.maps.LatLng(52.402482, 20.914325),
  23.           new google.maps.LatLng(52.403824, 20.916600),
  24.           new google.maps.LatLng(52.403965, 20.916364),
  25.           new google.maps.LatLng(52.406272, 20.919384),
  26.           new google.maps.LatLng(52.402780, 20.926873),
  27.           new google.maps.LatLng(52.401243, 20.929211)];
  28.  
  29.         var line = new google.maps.Polyline({
  30.           path: path,
  31.           strokeColor: '#0000FF',
  32.           strokeOpacity: 1.0,
  33.           strokeWeight: 3
  34.  
  35.  
  36.  
  37.         });
  38.          line.setMap(map);
  39.  
  40.    var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
  41.   var myLatLng = new google.maps.LatLng(52.387913, 20.928782);
  42.   var beachMarker = new google.maps.Marker({
  43.     position: latLng,
  44.     map: map,
  45.     icon: image
  46.   });
  47.  
  48.  
  49.       }   
  50.  
  51.  
  52.  
  53.  
  54.       function initialize() {
  55.         var mapDiv = document.getElementById('map-canvas');
  56.         var map = new google.maps.Map(mapDiv, {
  57.           center: new google.maps.LatLng(52.397672,20.920736),
  58.           zoom: 10,
  59.           mapTypeId: google.maps.MapTypeId.ROADMAP
  60.         });
  61.         var path = [new google.maps.LatLng(52.359594, 20.972528),
  62.           new google.maps.LatLng(52.363473, 21.004286),
  63.           new google.maps.LatLng(52.356658, 21.011667),
  64.           new google.maps.LatLng(52.363368, 21.042738),
  65.           new google.maps.LatLng(52.365045, 21.071577),
  66.           new google.maps.LatLng(52.354666, 21.077929),
  67.           new google.maps.LatLng(52.346593, 21.084280),
  68.           new google.maps.LatLng(52.345754, 21.075354),
  69.           new google.maps.LatLng(52.333587, 21.083250),
  70.           new google.maps.LatLng(52.362424, 21.112776),
  71.           new google.maps.LatLng(52.368504, 21.116381),
  72.           new google.maps.LatLng(52.372487, 21.106253),
  73.  new google.maps.LatLng(52.386214, 21.094408),
  74.  new google.maps.LatLng(52.401089, 21.094236),
  75.  new google.maps.LatLng(52.412085, 21.117411),
  76.  new google.maps.LatLng(52.423811, 21.108484),
  77.  new google.maps.LatLng(52.42224, 21.098700),
  78.  new google.maps.LatLng(52.435847, 21.0987),
  79.  new google.maps.LatLng(52.442649, 21.113634),
  80.  new google.maps.LatLng(52.463885, 21.105909),
  81.  new google.maps.LatLng(52.471938, 21.092005),
  82. new google.maps.LatLng(52.476852, 21.092348),
  83. new google.maps.LatLng(52.478839, 21.068316),
  84. new google.maps.LatLng(52.5057,21.080675),
  85. new google.maps.LatLng(52.519908,21.133375),
  86. new google.maps.LatLng(52.524191,21.144018),
  87. new google.maps.LatLng(52.52795,21.136637),
  88. new google.maps.LatLng(52.531605,21.120329),
  89. new google.maps.LatLng(52.538601,21.121359),
  90. new google.maps.LatLng(52.539854,21.124792),
  91. new google.maps.LatLng(52.549563,21.115694),
  92. new google.maps.LatLng(52.569913,21.135435),
  93. new google.maps.LatLng(52.562818,21.097841),
  94. new google.maps.LatLng(52.549772,21.088743),
  95. ];
  96.  
  97.  
  98.  
  99.  
  100.         var line = new google.maps.Polyline({
  101.           path: path,
  102.           strokeColor: '#FF0000',
  103.           strokeOpacity: 1.0,
  104.           strokeWeight: 4
  105.  
  106.  
  107.  
  108.         });
  109.          line.setMap(map);
  110.  
  111.    var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
  112.   var myLatLng = new google.maps.LatLng(52.387913, 20.928782);
  113.   var beachMarker = new google.maps.Marker({
  114.     position: latLng,
  115.     map: map,
  116.     icon: image
  117.   });
  118.  
  119.  
  120.       }   
  121.  
  122.  
  123.  
  124.  
  125.  
  126.  
  127.       google.maps.event.addDomListener(window, 'load', initialize);
  128.     </script>
  129.   </head>
  130.   <body style="font-family: Arial; border: 0 none;">
  131.     <div id="map-canvas" style="width: 600px; height: 500px"></div>
  132.   </body>
  133. </html>
[HTML] pobierz, plaintext


Proszę o pomoc
Go to the top of the page
+Quote Post
#luq
post 27.01.2011, 19:51:08
Post #2





Grupa: Zarejestrowani
Postów: 589
Pomógł: 91
Dołączył: 22.05.2008
Skąd: Gliwice

Ostrzeżenie: (0%)
-----

sciana.gif a czego się spodziewasz po tym kodzie jeśli nadpisujesz funkcje initialize() ?


--------------------
Moja gra - scraby.io
Go to the top of the page
+Quote Post
Norbit_24
post 27.01.2011, 20:37:13
Post #3





Grupa: Zarejestrowani
Postów: 163
Pomógł: 2
Dołączył: 7.03.2009

Ostrzeżenie: (0%)
-----

Wiem, że nadpisuje. Ale chciałem Wam pokazać dwie linie jakie sa do wyświetlenia.

Jak połączyć te dwie funkcje i wyświetlić dwie linie na mapie?

nikt nie wie?
Go to the top of the page
+Quote Post
thek
post 28.01.2011, 11:12:17
Post #4





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
Dodać linię jako drugą zmienną i też wrzucić na mapę odpowiednio modyfikując granice wyświetlania metodą setBounds czy coś w ten deseń?

Bym zapomniał... wszystko to ma być w ramach JEDNEJ funkcji initialize()! Bo tak to zawsze zobaczysz jedynie tę drugą.


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 8.07.2025 - 22:05
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn