Google Maps JavaScript绘制折线

Question

I am trying to draw a Polyline through Google maps. 我正在尝试通过Google地图绘制一条折线。 I have already gotten a path through the snap to road function, but I get it as an object, but I need an array as a path. 我已经获得了通过捕捉到道路功能的路径，但是我将其作为对象获得，但是我需要一个数组作为路径。 Any idea of how to convert the path object to Array? 关于如何将路径对象转换为数组的任何想法吗？ This is the code I've gotten so far: 这是到目前为止我得到的代码：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
    var map;

    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 65, lng: -20},
          zoom: 8
        });
        path = (64.06507, -21.57787),(64.06324000000001, -21.567200000000003),(64.06213000000001, -21.560760000000002),(64.06129, -21.555650000000004),(64.06070000000001, -21.55158);
        var geralinu = new google.maps.Polyline({
            path: path,
            strokeColor: 'Red',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });
        //geralinu.setPath(lina);
        }
    </script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClRZNMxcuO2BSi3nynNQu7e7uFyzylWZ4&callback=initMap">
    </script>
  </body>
</html>

The error I'm getting is Uncaught TypeError: Object.entries is not a function 我收到的错误是未捕获的TypeError：Object.entries不是一个函数

Answer 1

This is not valid javascript: 这是无效的javascript：

path = (64.06507, -21.57787),(64.06324000000001, -21.567200000000003),(64.06213000000001, -21.560760000000002),(64.06129, -21.555650000000004),(64.06070000000001, -21.55158);

I would suggest making an array of google.maps.LatLngLiteral objects (I removed some of the extra zeros at the end): 我建议创建一个google.maps.LatLngLiteral对象数组（我在末尾删除了一些额外的零）：

var path = [{lat: 64.06507,lng: -21.57787}, {lat: 64.06324,lng: -21.5672}, {lat: 64.06213,lng: -21.56076}, {  lat: 64.06129,lng: -21.55565}, {lat: 64.0607,lng: -21.55158}];

proof of concept fiddle 概念证明

code snippet: 代码段：

 var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 65, lng: -20 }, zoom: 8 }); var path = [{lat: 64.06507,lng: -21.57787}, {lat: 64.06324,lng: -21.5672}, {lat: 64.06213,lng: -21.56076}, {lat: 64.06129,lng: -21.55565}, {lat: 64.0607,lng: -21.55158}]; var geralinu = new google.maps.Polyline({ path: path, strokeColor: 'Red', strokeOpacity: 1.0, strokeWeight: 2, map: map }); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < geralinu.getPath().getLength(); i++) { bounds.extend(geralinu.getPath().getAt(i)); } map.fitBounds(bounds); } google.maps.event.addDomListener(window, "load", initMap);

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

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map"></div>

Google Maps JavaScript绘制折线

问题描述

1 个解决方案

解决方案1
0 2016-02-05 01:50:11

Google Maps JavaScript绘制折线

问题描述

1 个解决方案

解决方案1 0 2016-02-05 01:50:11

解决方案1
0 2016-02-05 01:50:11