Question

我使用谷歌地图显示标记，然后我想用折线逐个链接标记。但折线没有显示。我的代码如下：

$(document).ready(function (){
    /*map initial*/
    var mapOptions = {
        ...
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    /*draw markers*/
    var tmp_user_location1 = new google.maps.LatLng(37.772,-122.214);
    var tmp_marker1 = new google.maps.Marker({
        position: tmp_user_location1,
        map: map
    });
    var tmp_user_location2 = new google.maps.LatLng(21.291,-157.821);
    var tmp_marker2 = new google.maps.Marker({
        position: tmp_user_location2,
        map: map
    });
    arr_markers.push(tmp_marker1);
    arr_markers.push(tmp_marker2);
    /*draw polyline*/
    arr_user_location_polyline.push(tmp_user_location1);
    arr_user_location_polyline.push(tmp_user_location2);
    var user_location_path = new google.maps.Polyline({
        paths: arr_user_location_polyline,
        geodesic: true,
        strokeColor: "#FF00FF",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    user_location_path.setMap(map);
}

screen capture picture 有人帮忙吗？非常感谢。

Answer 1

您的代码存在的问题是，google.maps.PolylineOptions对象没有paths属性（google.maps.Polygon确实如此），它具有path属性。

var user_location_path = new google.maps.Polyline({
  path: arr_user_location_polyline,
  geodesic: true,
  strokeColor: "#FF00FF",
  strokeOpacity: 1.0,
  strokeWeight: 2
});

如果我解决了这个问题，以及发布代码中的javascript错误：

未捕获的ReferenceError：未定义arr_markers
未捕获的ReferenceError：未定义arr_user_location_polyline

我得到折线：proof of concept fiddle

代码段

$(document).ready(function() {
  var arr_markers = [];
  var arr_user_location_polyline = [];
  /*map initial*/
  var mapOptions = {
    center: {
      lat: 21.291,
      lng: -157.821
    },
    zoom: 3
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  /*draw markers*/
  var tmp_user_location1 = new google.maps.LatLng(37.772, -122.214);
  var tmp_marker1 = new google.maps.Marker({
    position: tmp_user_location1,
    map: map
  });
  var tmp_user_location2 = new google.maps.LatLng(21.291, -157.821);
  var tmp_marker2 = new google.maps.Marker({
    position: tmp_user_location2,
    map: map
  });
  arr_markers.push(tmp_marker1);
  arr_markers.push(tmp_marker2);
  /*draw polyline*/
  arr_user_location_polyline.push(tmp_user_location1);
  arr_user_location_polyline.push(tmp_user_location2);
  var user_location_path = new google.maps.Polyline({
    path: arr_user_location_polyline,
    geodesic: true,
    strokeColor: "#FF00FF",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  user_location_path.setMap(map);
});

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

为什么谷歌地图折线不显示（在Chrome中）？

1 个答案: