2016-11-12 71 views
-1

好,我想讓這樣的事情:http://www.mapademataro.net/espanol/mapademataro_espanol.html如何繪製線條之間的谷歌地圖richmarkers

但與谷歌地圖API,我做的好與建立richmarkers,但我不知道該怎麼做富馬克之間的界限,這裏是我的代碼:

<!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> 

希望,你可以幫助我,教我如何做到這一點。

+0

您是否在尋找標記之間直折線?或路線(駕駛)? – geocodezip

+0

我想要標記之間的直多段線 – hastati

+0

將標記的位置添加到[Polyline](https://developers.google.com/maps/documentation/javascript/shapes#polylines) – geocodezip

回答

0

要在標記之間創建一個google.maps.Polyline,請將標記位置的所有位置添加到google.maps.Polyline的路徑中(查看發佈代碼中的順序,您可能需要重新排列它們以使路徑更簡單;但是它們也可能是你想要的順序)。

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

代碼片段:

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>

+0

的路徑感謝很多人,你幫了我很多。 – hastati

相關問題