个人中心
gpt4 book ai didi

javascript - 绘制地点标记和路径谷歌地图

转载 作者：行者123 更新时间：2023-11-30 20:41:04 27 4
gpt4 key购买 nike

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

What i need is : I have a another two points.those are pre-defined.( I need to draw that path with marker A & B for starting point & End point with path in same map.

Start Lat & Long 2.852888, 101.651970
End Lat & Long 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>

实际上我需要这张 map 中的另一条路径，如下图所示。(上面提到的地理坐标)

enter image description here

最佳答案

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

参见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>

关于javascript - 绘制地点标记和路径谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49261324/

27 4 0
文章推荐： php - 常量 [C/PHP] - 差异和比较
文章推荐： java - 用Java或C将1010存储在矩阵中
文章推荐： c++ - 使用 Sendmessage settext 设置文本框文本仅发送字符串 win32 c++ 的第一个字符？
文章推荐： java - 如何在Java编写的IDE中集成GCC编译器？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com