绘制地点标记和路径谷歌地图答案

【问题标题】：Draw Place marker & path google map绘制地点标记和路径谷歌地图
【发布时间】：2018-03-13 16:33:36
【问题描述】：

我有一个谷歌地图路线代码。在此代码中，此标记指向提供的纬度和经度。

我需要的是：我还有另外两个点。这些是预定义的。（我需要用标记 A 和 B 绘制该路径作为起点和终点，并在同一张地图中使用路径。

开始经纬 2.852888, 101.651970
结束纬度和经度 2.941660, 101.594207

这段代码表明

<!DOCTYPE html>
<meta charset="utf-8" />
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    html {
      height: 100%
    }
    
    body {
      height: 100%;
      margin: 0;
      padding: 0
    }
    
    #map {
      height: 90%;
      width: 90%
    }
  </style>

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>

  <script type="text/javascript">
    var line;

    var map;
    var pointDistances;

    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(2.881766, 101.626877),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };




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

      // var myLatLng = {lat: 2.941660, lng: 101.594207}; //2.852888, 101.651970
      // 2.941660, 101.594207


      // var marker = new google.maps.Marker({
      //    position: myLatLng,
      //    map: map,
      //    title: 'Hello World!'
      // });
      var lineCoordinates = [
        new google.maps.LatLng(2.86085, 101.6437),
        new google.maps.LatLng(2.87165, 101.6362),
        new google.maps.LatLng(2.880783, 101.6273),
        new google.maps.LatLng(2.891517, 101.6201),
        new google.maps.LatLng(2.8991, 101.6162),
        new google.maps.LatLng(2.915067, 101.6079)
      ];

      map.setCenter(lineCoordinates[0]);

      // point distances from beginning in %
      var sphericalLib = google.maps.geometry.spherical;

      pointDistances = [];
      var pointZero = lineCoordinates[0];
      var wholeDist = sphericalLib.computeDistanceBetween(
        pointZero,
        lineCoordinates[lineCoordinates.length - 1]);

      for (var i = 0; i < lineCoordinates.length; i++) {
        pointDistances[i] = 100 * sphericalLib.computeDistanceBetween(
          lineCoordinates[i], pointZero) / wholeDist;
        console.log('pointDistances[' + i + ']: ' + pointDistances[i]);
      }

      // define polyline
      var lineSymbol = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 6,
        strokeColor: '#393'
      };

      line = new google.maps.Polyline({
        path: lineCoordinates,
        strokeColor: '#FF0000',
        strokeOpacity: 2.0,
        strokeWeight: 5,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }],
        map: map
      });

      animateCircle();
    }


    var id;

    function animateCircle() {
      var count = 0;
      var offset;
      var sentiel = -1;

      id = window.setInterval(function() {
        count = (count + 1) % 200;
        offset = count / 2;

        for (var i = pointDistances.length - 1; i > sentiel; i--) {
          if (offset > pointDistances[i]) {
            console.log('create marker');
            var marker = new google.maps.Marker({
              icon: {
                url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
                size: new google.maps.Size(7, 7),
                anchor: new google.maps.Point(4, 4)
              },
              position: line.getPath().getAt(i),
              title: line.getPath().getAt(i).toUrlValue(6),
              map: map
            });

            sentiel++;
            break;
          }
        }

        // we have only one icon
        var icons = line.get('icons');
        icons[0].offset = (offset) + '%';
        line.set('icons', icons);

        if (line.get('icons')[0].offset == "99.5%") {
          icons[0].offset = '100%';
          line.set('icons', icons);
          window.clearInterval(id);
        }

      }, 20);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>


</head>

<body>
  <div id='map'></div>
</body>

</html>

实际上我需要在这张地图中使用另一条路径，如下图所示。（上面提到的地理坐标）

【问题讨论】：

我不确定您需要什么。您有一条路径，要创建另一条路径吗？
@MoshFeu 是的，带有标记
为什么它与您已经实现的路径不同？究竟是什么问题？
@MoshFeu 这个蓝色路径已经给定了路径（在我的场景中从他的经理那里给司机）
你想把标记放在哪里？

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

如果我理解正确，这是我的方法。

参见drawBlueLine 方法。

var line;

var map;
var pointDistances;

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(2.881766, 101.626877),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  var lineCoordinates = [
    new google.maps.LatLng(2.86085, 101.6437),
    new google.maps.LatLng(2.87165, 101.6362),
    new google.maps.LatLng(2.880783, 101.6273),
    new google.maps.LatLng(2.891517, 101.6201),
    new google.maps.LatLng(2.8991, 101.6162),
    new google.maps.LatLng(2.915067, 101.6079)
  ];

  map.setCenter(lineCoordinates[0]);

  // point distances from beginning in %
  var sphericalLib = google.maps.geometry.spherical;

  pointDistances = [];
  var pointZero = lineCoordinates[0];
  var wholeDist = sphericalLib.computeDistanceBetween(
    pointZero,
    lineCoordinates[lineCoordinates.length - 1]);

  for (var i = 0; i < lineCoordinates.length; i++) {
    pointDistances[i] = 100 * sphericalLib.computeDistanceBetween(
      lineCoordinates[i], pointZero) / wholeDist;
    console.log('pointDistances[' + i + ']: ' + pointDistances[i]);
  }

  // define polyline
  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 6,
    strokeColor: '#393'
  };

  line = new google.maps.Polyline({
    path: lineCoordinates,
    strokeColor: '#FF0000',
    strokeOpacity: 2.0,
    strokeWeight: 5,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });

  animateCircle();
  
  drawBlueLine(map, lineSymbol);
}


var id;

function animateCircle() {
  var count = 0;
  var offset;
  var sentiel = -1;

  id = window.setInterval(function() {
    count = (count + 1) % 200;
    offset = count / 2;

    for (var i = pointDistances.length - 1; i > sentiel; i--) {
      if (offset > pointDistances[i]) {
        console.log('create marker');
        var marker = new google.maps.Marker({
          icon: {
            url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
            size: new google.maps.Size(7, 7),
            anchor: new google.maps.Point(4, 4)
          },
          position: line.getPath().getAt(i),
          title: line.getPath().getAt(i).toUrlValue(6),
          map: map
        });

        sentiel++;
        break;
      }
    }

    // we have only one icon
    var icons = line.get('icons');
    icons[0].offset = (offset) + '%';
    line.set('icons', icons);

    if (line.get('icons')[0].offset == "99.5%") {
      icons[0].offset = '100%';
      line.set('icons', icons);
      window.clearInterval(id);
    }

  }, 20);
}

function drawBlueLine(map, lineSymbol) {
  console.log();
  var startBlue = new google.maps.LatLng(2.852888, 101.651970);
  var endBlue = new google.maps.LatLng(2.941660, 101.594207);

  var blueLine = new google.maps.Polyline({
    path: [startBlue, endBlue],
    strokeColor: '#0000ff',
    strokeOpacity: 2.0,
    strokeWeight: 5,
    icons: [{
      icon: lineSymbol,
      offset: '100%'
    }],
    map: map
  });
  
  new google.maps.Marker({
    position: startBlue,
    map: map
  });
  
  new google.maps.Marker({
    position: endBlue,
    map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0;
  padding: 0
}

#map {
  height: 90%;
  width: 90%
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
<div id='map'></div>

【讨论】：