搜索
搜索

绘制地点标记和路径Google地图

Techguy 发表于 Dev
25
技术专家

我有一个Google Maps路线代码。在此代码中，此标记转到提供的纬度和经度。

我需要的是：我还有另外两个point.thes是预先定义的。（我需要在同一地图中用标记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>

实际上，我需要在该地图中添加另一个路径，如下图所示。（上述地理坐标）

在此处输入图片说明

莫什·费

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自Google地点详情API和Google地图的不同经度？

Android Google地图在移动时绘制路径

通过拖放在Google地图上快速绘制网格和标记

如何使用谷歌地图标记地点

如何根据不同的ID（Swift）绘制Google地图标记

标记未使用Mapbox和传单在地图上绘制？

使用移动谷歌地图移动标记和重绘路径

Google地图，绘制带有多个标记的路线，隐藏最后一个标记以外的标记

如何在Google地图中绘制彩色路径？

在地图上绘制带有实线和虚线的路径

在流星的Google地图中显示附近的地点

有没有办法仅使用 lng 和 lat 坐标从 Google 地图获取地点？

谷歌地图; 将地点卡添加到标记

在谷歌地图街景api中标记地点类型

绘制路线并根据以角度 6 绘制的路径自动放大/缩小 Google 地图

jVectorMap标记和地图

Google地图：多边形和标记Z-Index

文本到语音 - Android Studio 中的 Google 地图和标记

在 Google 地图中显示附近标记的距离和名称

如何在Android中动态更新/最佳利用LatLngBounds来自动放置地点和Google地图

Google Maps-拖放标记和绘制路线

如何使用Google Maps SDK（Swift / iOS）在地图标记周围绘制半径？

如何在Google地图中的两个标记之间绘制路线

在HTML中使用地图标记时，Google Chrome会绘制多边形

Google地图-来自不同地点的不同路线

如何访问Google地图中某个地点的事件数据？

在Highmaps中的世界地图上的两个标记之间绘制小的对称弧线路径

如何使用“地点ID”直接链接到Google地图上的地点

在地图中的多个标记周围绘制圆圈

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    计算数据帧R中的字符串频率

  3. 3

    如何使用Redux-Toolkit重置Redux Store

  4. 4

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  5. 5

    如何使用tweepy流式传输来自指定用户的推文（仅在该用户发布推文时流式传输）

  6. 6

    TreeMap中的自定义排序

  7. 7

    TYPO3：将 Formhandler 添加到新闻扩展

  8. 8

    遍历元素数组以每X秒在浏览器上显示

  9. 9

    在Ubuntu和Windows中，触摸板有时会滞后。硬件问题？

  10. 10

    警告消息：在matrix（unlist（drop.item），ncol = 10，byrow = TRUE）中：数据长度[16]不是列数的倍数[10]>？

  11. 11

    无法连接网络并在Ubuntu 14.04中找到eth0

  12. 12

    将辅助轴原点与主要轴对齐

  13. 13

    我可以ping IPv6但不能ping IPv4

  14. 14

    在Jenkins服务器中使用Selenium和Ruby进行的黄瓜测试失败，但在本地计算机中通过

  15. 15

    提交html表单时为空

  16. 16

    使用C ++ 11将数组设置为零

  17. 17

    如果从DB接收到的值为空，则JMeter JDBC调用将返回该值作为参数名称

  18. 18

    尝试在Dell XPS13 9360上安装Windows 7时出错

  19. 19

    如何在R中转置数据

  20. 20

    无法使用 envoy 访问 .ssh/config

  21. 21

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

热门标签

归档