Question

我已经创建了这样的折线图

但是我想在每一点设置引脚...... 像这个：

我怎么能这样做？

这是我的javascript代码......

<script>
        latawal = <?php echo json_encode($locationawal['lat'])?>;
        longawal = <?php echo json_encode($locationawal['lon'])?>;

        var GoogleMaps = function () {
            var mapPolylines = function() {
                var map = new GMaps({
                    div: '#gmap_polylines',
                    lat: latawal,
                    lng: longawal,
                    click: function(e){
                      console.log(e);
                    }
                  });

                    path = [
                        <?php foreach ($locationawal10 as $row){ ?>
                            [<?php echo json_encode($row['lat'])?>, <?php echo json_encode($row['lon'])?>],
                        <?php } ?>
                    ];

                  map.drawPolyline({
                    path: path,
                    strokeColor: 'Red',
                    strokeOpacity: 0.6,
                    strokeWeight: 4
                });
            }
            return {
                //main function to initiate map samples
                init: function () {
                    mapPolylines();
                }

            };

        }();
    </script>

之前感谢....我希望有人可以帮我解决这个问题...对不起我的英语不好......

Answer 1

似乎你需要制作多个标记。您将使用每个标记的latawal和longawal json文件中的latlang值作为标记的LatLng值。请查看此SO thread以获取其他参考。我做了一个快速演示，让你传达这个想法。您可能需要修改需要更清晰编码的部件。这是相关部分：

 function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var flightPlanCoordinates = [
          {lat: -32.342841, lng: 119.882813},
          {lat: -32.194209, lng: 144.492188},
          {lat: -19.248922, lng: 145.546875},
          {lat: -18.916680, lng: 124.804688}
        ];

        var markerCoordinates = [
          [-32.342841, 119.882813],
          [-32.194209, 144.492188],
          [-19.248922, 145.546875],
          [-18.916680, 124.804688]
         ];

      var marker, i;

    for (i = 0; i < markerCoordinates.length; i++) {  

      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(markerCoordinates[i][i-i], markerCoordinates[i][1]),
          map: map,
          title: 'Hello World!'
        });
     }  

     var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPath.setMap(map);
      }

这就是它的样子：

如果您阅读有关Markers的文档，那将会非常有用。

Answer 2

最简单的解决方案是处理path并在每个顶点添加标记。

 for (var i=0; i<path.length; i++) {
   map.addMarker({
     lat: path[i].lat,
     lng: path[i].lng,
   })
 }

proof of concept fiddle

代码段

＆＃13;

function initialize() {
  latawal = 41.5;
  longawal = -72.4;

  var GoogleMaps = function() {
    var mapPolylines = function() {
      var map = new GMaps({
        div: '#gmap_polylines',
        lat: latawal,
        lng: longawal,
        zoom: 8,
        click: function(e) {
          console.log(e);
        }
      });

      path = [{
        lat: 42,
        lng: -72
      }, {
        lat: 41,
        lng: -72.4
      }, {
        lat: 41.5,
        lng: -72.6
      }];

      map.drawPolyline({
        path: path,
        strokeColor: 'Red',
        strokeOpacity: 0.6,
        strokeWeight: 4
      });
      for (var i = 0; i < path.length; i++) {
        map.addMarker({
          lat: path[i].lat,
          lng: path[i].lng,
        })
      }
    }
    return {
      //main function to initiate map samples
      init: function() {
        mapPolylines();
      }
    };
  }();
  GoogleMaps.init();
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#gmap_polylines {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>
<div id="gmap_polylines"></div>

＆＃13;

如何用pin制作谷歌地图Api折线？

2 个答案: