wie Linien zeichnen zwischen Google Maps richmarkers

-1

auch ich, so etwas machen möchten: http://www.mapademataro.net/espanol/mapademataro_espanol.html wie Linien zeichnen zwischen Google Maps richmarkers

aber mit der Google Maps API, ich mit der Einrichtung der richmarkers ok tue, aber ich weiß nicht, wie zu machen die Linien zwischen den richmarkers, hier ist mein Code:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Rich Marker</title> 

    <style> 
     body{ 
    margin: 0 auto; 
} 
     #map, #map2 { 
     position: relative; 
     padding-bottom: 75%; 
     height: 0; 
     overflow: hidden; 
     } 
     .my-marker { 
     background: white; 
     border: 2px solid #fff; 
     padding: 3px; 
     } 
     .my-marker img{ 
     width: 50px; 
     height: 50px; 
     } 

     .my-other-marker { 
     background: blue; 
     border: 2px solid #fff; 
     padding: 3px; 
     } 
     #log { 
     clear: both; 
     } 
     #content { 
     padding-left: 5px; 
     } 
     #marker-content { 
     width: 350px; 
     height: 150px; 
     } 
    </style> 

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
     var script = '<script src="src/richmarker'; 
     script += '.js"><' + '/script>'; 
     document.write(script); 
    </script> 


    <script> 
     /** 
     * Called on the intiial page load. 
     */ 
     var map; 
     var tedi; 
     var unidos; 
     var fundefam; 
     var down1; 
     var ceaa; 
     var ceiaa; 
     var hog; 
     var cre; 
     var andar; 
     var puerta; 
     var reto; 
     var efeta; 
     function init() { 
     var mapCenter = new google.maps.LatLng(25.7195811,-100.3436205); 
     var ted = new google.maps.LatLng(25.655346, -100.392785); 
     var unido = new google.maps.LatLng(25.675220, -100.358649); 
     var fundefa = new google.maps.LatLng(25.664799, -100.327432); 
     var downm1 = new google.maps.LatLng(25.663897, -100.329036); 
     var cea = new google.maps.LatLng(25.625733, -100.290375); 
     var ceia = new google.maps.LatLng(25.747410, -100.295102); 
     var hoga = new google.maps.LatLng(25.658873, -100.242196); 
     var cree = new google.maps.LatLng(25.687754, -100.356118); 
     var andares = new google.maps.LatLng(25.466424, -100.173198); 
     var puertas = new google.maps.LatLng(25.661694, -100.400546); 
     var retos = new google.maps.LatLng(25.682272, -100.325996); 
     var effeta = new google.maps.LatLng(25.675491, -100.338032); 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: mapCenter, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     tedi = new RichMarker({ 
      position: ted, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>TEDI</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

      unidos = new RichMarker({ 
      position: unido, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>UNIDOS</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

      fundefam = new RichMarker({ 
      position: fundefa, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>FUNDEFAM</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

      down1 = new RichMarker({ 
      position: downm1, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>DOWN</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/><div>MTY</div></div></div>' 
      }); 

       ceaa = new RichMarker({ 
      position: cea, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>CEAA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

       ceiaa = new RichMarker({ 
      position: ceia, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>CEIA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

      hog = new RichMarker({ 
      position: hoga, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>HOGA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

      cre = new RichMarker({ 
      position: cree, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>CREE</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

      andar = new RichMarker({ 
      position: andares, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>ANDARES</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

      puerta = new RichMarker({ 
      position: puertas, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>PUERTAS</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div><div>ABIERTAS</div></div>' 
      }); 

      reto = new RichMarker({ 
      position: retos, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>RETOS</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

      efeta = new RichMarker({ 
      position: effeta, 
      map: map, 
      draggable: false, 
      content: '<div class="my-marker"><div>EFFETA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
      }); 

     var count = 1; 
     google.maps.event.addListener(marker, 'click', function() { 
      window.location = "tedi.html"; 
     }); 

     } 
     function log(msg) { 
     var log = document.getElementById('log'); 
     log.innerHTML = msg; 
     } 
     function setMarkerContent() { 
     var content = document.getElementById('marker-content').value; 
     marker.setContent(content); 
     } 
     function toggleMap() { 
     if (marker.getMap() == map) { 
      marker.setMap(map2); 
     } else { 
      marker.setMap(map); 
     } 
     } 
     function toggleFlat() { 
     marker.setFlat(!marker.getFlat()); 
     } 
     function toggleVisible() { 
     marker.setVisible(!marker.getVisible()); 
     } 
     function toggleAnchor() { 
     var anchor = marker.getAnchor(); 
     if (anchor == 9) { 
      anchor = 1; 
     } else { 
      anchor++; 
     } 
     marker.setAnchor(anchor); 
     } 
     // Register an event listener to fire when the page finishes loading. 
     google.maps.event.addDomListener(window, 'load', init); 
    </script> 

    <script> 
     var _gaq = _gaq || []; 
     _gaq.push(['_setAccount', 'UA-12846745-20']); 
     _gaq.push(['_trackPageview']); 
     (function() { 
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
     ga.src = ('https:' === document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
     })(); 
    </script> 
    </head> 
    <body> 
    <h3>Rich Marker v3</h3> 
    <div id="map"></div> 
    <div id="log"></div> 
    </body> 
</html>

Hoffnung, könnten Sie mir helfen und mir beibringen, wie dies geschieht.

Quelle

2016-11-12 hastati

Suchen Sie zwischen den Markierungen gerade Polylinien für? Oder Linien, die den Straßen folgen (fahren)? – geocodezip

Ich möchte gerade Polylinien zwischen den Markierungen – hastati

Fügen Sie die Positionen der Markierungen zum Pfad einer [Polylinie] (https://developers.google.com/maps/documentation/javascript/shapes#polylines) – geocodezip

Um zwischen den Markern einen google.maps.Polyline zu erstellen, fügen Sie dem Pfad eines google.maps.Polyline alle Positionen der Markerpositionen hinzu (Sie können die Reihenfolge im veröffentlichten Code neu anordnen, um den Pfad einfacher zu machen; aber sie kann auch in der Reihenfolge sein, die Sie wollen).

var polyPath = [ted,unido,fundefa,downm1,cea,ceia,hoga,cree,andares,puertas,retos,effeta]; 
var polyline = new google.maps.Polyline({path: polyPath, map: map});

proof of concept fiddle

Code-Schnipsel:

function init() { 
 
    var mapCenter = new google.maps.LatLng(25.7195811, -100.3436205); 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    center: mapCenter, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var polyPath = [ted, unido, fundefa, downm1, cea, ceia, hoga, cree, andares, puertas, retos, effeta]; 
 
    var polyline = new google.maps.Polyline({ 
 
    path: polyPath, 
 
    map: map 
 
    }); 
 

 

 
    tedi = new RichMarker({ 
 
    position: ted, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>TEDI</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    unidos = new RichMarker({ 
 
    position: unido, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>UNIDOS</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    fundefam = new RichMarker({ 
 
    position: fundefa, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>FUNDEFAM</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    down1 = new RichMarker({ 
 
    position: downm1, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>DOWN</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/><div>MTY</div></div></div>' 
 
    }); 
 

 
    ceaa = new RichMarker({ 
 
    position: cea, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>CEAA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    ceiaa = new RichMarker({ 
 
    position: ceia, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>CEIA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    hog = new RichMarker({ 
 
    position: hoga, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>HOGA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    cre = new RichMarker({ 
 
    position: cree, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>CREE</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    andar = new RichMarker({ 
 
    position: andares, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>ANDARES</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    puerta = new RichMarker({ 
 
    position: puertas, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>PUERTAS</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div><div>ABIERTAS</div></div>' 
 
    }); 
 

 
    reto = new RichMarker({ 
 
    position: retos, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>RETOS</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    efeta = new RichMarker({ 
 
    position: effeta, 
 
    map: map, 
 
    draggable: false, 
 
    content: '<div class="my-marker"><div>EFFETA</div><div><img src="https://farm4.static.flickr.com/3212/3012579547_097e27ced9_m.jpg"/></div></div>' 
 
    }); 
 

 
    var count = 1; 
 
} 
 
var map; 
 
var tedi; 
 
var unidos; 
 
var fundefam; 
 
var down1; 
 
var ceaa; 
 
var ceiaa; 
 
var hog; 
 
var cre; 
 
var andar; 
 
var puerta; 
 
var reto; 
 
var efeta; 
 
var ted = new google.maps.LatLng(25.655346, -100.392785); 
 
var unido = new google.maps.LatLng(25.675220, -100.358649); 
 
var fundefa = new google.maps.LatLng(25.664799, -100.327432); 
 
var downm1 = new google.maps.LatLng(25.663897, -100.329036); 
 
var cea = new google.maps.LatLng(25.625733, -100.290375); 
 
var ceia = new google.maps.LatLng(25.747410, -100.295102); 
 
var hoga = new google.maps.LatLng(25.658873, -100.242196); 
 
var cree = new google.maps.LatLng(25.687754, -100.356118); 
 
var andares = new google.maps.LatLng(25.466424, -100.173198); 
 
var puertas = new google.maps.LatLng(25.661694, -100.400546); 
 
var retos = new google.maps.LatLng(25.682272, -100.325996); 
 
var effeta = new google.maps.LatLng(25.675491, -100.338032); 
 

 

 
function log(msg) { 
 
    var log = document.getElementById('log'); 
 
    log.innerHTML = msg; 
 
} 
 

 
function setMarkerContent() { 
 
    var content = document.getElementById('marker-content').value; 
 
    marker.setContent(content); 
 
} 
 

 
function toggleMap() { 
 
    if (marker.getMap() == map) { 
 
    marker.setMap(map2); 
 
    } else { 
 
    marker.setMap(map); 
 
    } 
 
} 
 

 
function toggleFlat() { 
 
    marker.setFlat(!marker.getFlat()); 
 
} 
 

 
function toggleVisible() { 
 
    marker.setVisible(!marker.getVisible()); 
 
} 
 

 
function toggleAnchor() { 
 
    var anchor = marker.getAnchor(); 
 
    if (anchor == 9) { 
 
     anchor = 1; 
 
    } else { 
 
     anchor++; 
 
    } 
 
    marker.setAnchor(anchor); 
 
    } 
 
    // Register an event listener to fire when the page finishes loading. 
 
google.maps.event.addDomListener(window, 'load', init);

body { 
 
    margin: 0 auto; 
 
} 
 
#map { 
 
    position: relative; 
 
    padding-bottom: 75%; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 
.my-marker { 
 
    background: white; 
 
    border: 2px solid #fff; 
 
    padding: 3px; 
 
} 
 
.my-marker img { 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.my-other-marker { 
 
    background: blue; 
 
    border: 2px solid #fff; 
 
    padding: 3px; 
 
} 
 
#log { 
 
    clear: both; 
 
} 
 
#content { 
 
    padding-left: 5px; 
 
} 
 
#marker-content { 
 
    width: 350px; 
 
    height: 150px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/js-rich-marker/gh-pages/src/richmarker.js"></script> 
 
<div id="map"></div> 
 
<div id="log"></div>

Quelle

2016-11-12 17:36:30 geocodezip

vielen Dank Mann, du hilfst mir sehr. – hastati

wie Linien zeichnen zwischen Google Maps richmarkers

Antwort

Verwandte Themen