如何在谷歌地图富豪标记之间画线

时间：2016-11-12 16:07:15

标签： javascript html api google-maps

我想做这样的事情：http://www.mapademataro.net/espanol/mapademataro_espanol.html

但是使用谷歌地图api，我可以设置富豪标记，但我不知道如何在富豪标记之间建立界限，这是我的代码：

<!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>
希望，你可以帮助我并教我如何实现这一目标。

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题