Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] mapa google - jak wyświetlić dwie linie na jednej mapie..?
Forum PHP.pl > Forum > Przedszkole
Norbit_24
27.01.2011, 19:19:08
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
#luq
27.01.2011, 19:51:08
sciana.gif a czego się spodziewasz po tym kodzie jeśli nadpisujesz funkcje initialize() ?
Norbit_24
27.01.2011, 20:37:13
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?
thek
28.01.2011, 11:12:17
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ą.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.