Question

我遇到了谷歌地图折线出现的问题，虽然我让它在非常相似的其他情况下工作。此函数可以绘制标记，但由于某种原因，它们之间不会出现任何路径：

var map;
function initGoogleMap() {
  var myLatLng = {
    lat: 10,
    lng: -97
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 1,
    center: myLatLng,
    mapTypeId: 'satellite',
    mapTypeControl: true,
    streetViewControl: false,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'satellite']
    }
  });
}

function drawArray() {
  var lats = ["51.5", "21.43", "30", "40.10"];
  var lons = ["-0.06", "-100.36", "-223.23", "-333.94"];
  var lastLat = 0;
  var lastLon = 0;
  for (var t = 0; t < lats.length; t++) {
    var lat = lats[t];
    var lon = lons[t];

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lon),
      icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png",
      map: map
    });
    var lineSymbol = {
      // path: 'M 1,-1 1,1',
      path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
      strokeOpacity: 1,
      strokeColor: 'white',
      scale: 1
    };

    if (lastLat !== 0) {
      $("#show").append("lastLat=" + lastLat + " lastLon=" + lastLon + "<BR>");
      $("#show").append("lat=" + lat + " lon=" + lon + "<BR>");
      var line = new google.maps.Polyline({
        path: [{
          lat: lastLat,
          lng: lastLon
        }, {
          lat: lat,
          lng: lon
        }],
        strokeOpacity: 0,
        icons: [{
          icon: lineSymbol,
          offset: '0',
          repeat: '20px'
        }],
        map: map
      });
    }
    lastLat = lat;
    lastLon = lon;
  }
}

initGoogleMap();
drawArray();

https://jsfiddle.net/hfeist/t9z29f1q/

有一个小提琴

Answer 1

使用

int

代替，

lats = [51.5, 21.43, 30, 40.10];
lons = [-0.06, -100.36, -223.23, -333.94];

JSFiddle demo

如何显示Google地图折线

1 个答案: