Forum Coders' city Strona Główna Coders' city
Nasza pasja to programowanie!
 

 PomocPomoc   SzukajSzukaj   UżytkownicyUżytkownicy   GrupyGrupy  RejestracjaRejestracja 
Archiwum starego forum + teoria    RSS & Panel/SideBar
 ProfilProfil   Zaloguj się, by sprawdzić wiadomościZaloguj się, by sprawdzić wiadomości   ZalogujZaloguj 

Potrzebuję szybkiej odpowiedzi na moje pytanie... Zasady

Google Maps - image overlay i różnokolorowe markery - połączenie kodów.



 
Odpowiedz do tematu    Forum Coders' city Strona Główna -> ECMAScript
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
TommyLenn



Dołączył: 16 Cze 2015
Posty: 1

PostWysłany: Wto Cze 16, 2015 9:16 am  OP    Temat postu: Google Maps - image overlay i różnokolorowe markery - połączenie kodów. Odpowiedz z cytatem Pisownia

Cześć,
Mam taki problem. Wiem jak nałożyć obrazek na mapę, wiem jak zrobić różnokolorowe markery.
Nie wiem niestety jak zrobić to w jednym pliku.

To jest kod pliku z docelową mapą:
Kod:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Adding a Custom Overlay</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
// [START region_initialization]
// This example creates a custom overlay called USGSOverlay, containing
// a U.S. Geological Survey (USGS) image of the relevant area on the map.

// Set the custom overlay object's prototype to a new instance
// of OverlayView. In effect, this will subclass the overlay class.
// Note that we set the prototype to an instance, rather than the
// parent class itself, because we do not wish to modify the parent class.

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

function initialize() {
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(51.61034, 20.84458),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var swBound = new google.maps.LatLng(49.0025, 14.122666666666667);
  var neBound = new google.maps.LatLng(54.839556, 24.146333333333333);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'http://pspbyczyna.superhost.pl/site//images/PNG/Icons/HP-Network.png';


  // The custom USGSOverlay object contains the USGS image,
  // the bounds of the image, and a reference to the map.
  overlay = new USGSOverlay(bounds, srcImage, map);
}
// [END region_initialization]

// [START region_constructor]
/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Define a property to hold the image's div. We'll
  // actually create this div upon receipt of the onAdd()
  // method so we'll leave it null for now.
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}
// [END region_constructor]

// [START region_attachment]
/**
* onAdd is called when the map's panes are ready and the overlay has been
* added to the map.
*/
USGSOverlay.prototype.onAdd = function() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  // Create the img element and attach it to the div.
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};
// [END region_attachment]

// [START region_drawing]
USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's div to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};
// [END region_drawing]

// [START region_removal]
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};
// [END region_removal]

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>




A to kod z markerami, które powinny pojawić się na powyższej mapie:
Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
    {
        "title": 'Bombay Hospital',
        "lat": '18.9409388',
        "lng": '72.82819189999998',
        "description": 'Bombay Hospital',
        "type": 'Hospital'
    },
        {
            "title": 'Jaslok Hospital',
            "lat": '18.9716956',
            "lng": '72.80991180000001',
            "description": 'Jaslok Hospital',
            "type": 'Hospital'
        },
    {
        "title": 'Lilavati Hospital',
        "lat": '19.0509488',
        "lng": '72.8285644',
        "description": 'Lilavati Hospital',
        "type": 'Hospital'
    },
        {
            "title": 'Aksa Beach',
            "lat": '19.1759668',
            "lng": '72.79504659999998',
            "description": 'Aksa Beach',
            "type": 'Beach'
        },
        {
            "title": 'Juhu Beach',
            "lat": '19.0883595',
            "lng": '72.82652380000002',
            "description": 'Juhu Beach',
            "type": 'Beach'
        },
        {
            "title": 'Girgaum Beach',
            "lat": '18.9542149',
            "lng": '72.81203529999993',
            "description": 'Girgaum Beach',
            "type": 'Beach'
        },
        {
            "title": 'Oberoi Mall',
            "lat": '19.1737704',
            "lng": '72.86062400000003',
            "description": 'Oberoi Mall',
            "type": 'Mall'
        },
        {
            "title": 'Infinity Mall',
            "lat": '19.1846511',
            "lng": '72.83454899999992',
            "description": 'Infinity Mall',
            "type": 'Mall'
        },
            {
                "title": 'Phoenix Mall',
                "lat": '19.0759837',
                "lng": '72.87765590000003',
                "description": 'Phoenix Mall',
                "type": 'Mall'
            },
            {
                "title": 'Phoenix Mall',
                "lat": '19.0759837',
                "lng": '72.87765590000003',
                "description": 'Phoenix Mall',
                "type": 'Mall'
            },
            {
                "title": 'Hanging Garden',
                "lat": '18.9560279',
                "lng": '72.80538039999999',
                "description": 'Hanging Garden',
                "type": 'Park'
            },
            {
                "title": 'Jijamata Udyan',
                "lat": '18.979006',
                "lng": '72.83388300000001',
                "description": 'Jijamata Udyan',
                "type": 'Park'
            }
            ,
            {
                "title": 'Juhu Garden',
                "lat": '19.0839704',
                "lng": '72.83388300000001',
                "description": 'Juhu Garden',
                "type": 'Park'
            },
            {
                "title": 'Sanjay Gandhi National Park',
                "lat": '19.2147067',
                "lng": '72.91062020000004',
                "description": 'Sanjay Gandhi National Park',
                "type": 'Park'
            }
    ];
window.onload = function () {

    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    var i = 0;
    var interval = setInterval(function () {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var icon = "";
        switch (data.type) {
            case "Hospital":
                icon = "red";
                break;
            case "Beach":
                icon = "blue";
                break;
            case "Mall":
                icon = "yellow";
                break;
            case "Park":
                icon = "green";
                break;
        }
        icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title,
            animation: google.maps.Animation.DROP,
            icon: new google.maps.MarkerImage(icon)
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
        })(marker, data);
        latlngbounds.extend(marker.position);
        i++;
        if (i == markers.length) {
            clearInterval(interval);
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
        }
    }, 80);
}
</script>
<table>
<tr>
    <td>
        <div id="dvMap" style="width: 500px; height: 500px">
        </div>
    </td>
    <td valign="top">
        <u>Legend:</u><br />
        <img alt="" src="http://maps.google.com/mapfiles/ms/icons/red.png" />
        Hospitals<br />
        <img alt="" src="http://maps.google.com/mapfiles/ms/icons/blue.png" />
        Beaches<br />
        <img alt="" src="http://maps.google.com/mapfiles/ms/icons/yellow.png" />
        Malls<br />
        <img alt="" src="http://maps.google.com/mapfiles/ms/icons/green.png" />
        Parks<br />
    </td>
</tr>
</table>
</body>
</html>



No, więc problem w tym, że nie umiem połączyć tych kodów, tj. umieścić kolorowe markery na tej pierwszej mapie.

Czy ktoś zna rozwiązanie tego problemu? Byłbym ogromnie wdzięczny za pomoc, ponieważ ta sprawa spędza mi sen z powiek, a nie mam się kompletnie kogo poradzić.
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość
Wyświetl posty z ostatnich:   
Odpowiedz do tematu    Forum Coders' city Strona Główna -> ECMAScript Wszystkie czasy w strefie CET (Europa)

Strona 1 z 1

 
Skocz do:  
Możesz pisać nowe tematy
Możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Możesz dodawać załączniki na tym forum
Możesz pobierać pliki z tego forum




Debug: strone wygenerowano w 0.02634 sekund, zapytan = 11
contact

| Darmowe programy i porady Jelcyna | Tansze zakupy w Helionie | MS Office Blog |