Question

这是我几天前提出的post的后续行动，试图在新的方向上迎接挑战。我的目标是当我点击一个标记时，我希望我的折线的原点lat / lng与该标记的lat / lng相同。我遇到的诀窍是将行创建放在我的标记的for循环中，其中点击存在，以便该行将使用标记的坐标，即声明的标记。由于我在此函数之外声明了我的lat / lng变量，因此该行默认为其值：var oLat = 10.1 var oLng = 22.1而不是my循环中的值。这是我目前的循环：

for (var i in points) {
var p = points[i];
var latlng = new google.maps.LatLng(p[1], p[2]);

var marker = new google.maps.Marker({
    position: latlng,
    icon: points[i][3],
    zIndex: p[5],
    title: p[0]     
});

overviewMarkers.push(marker);


google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
    infowindow.setContent(points[i][6] + '<div id="infopanel">'+
  '<input onclick="addLine();" type=button value="Show Routes">'+
  '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
      infowindow.open(map, marker)
     oLat = parseFloat(this.position.lat().toFixed(4))
     oLng = parseFloat(this.position.lng().toFixed(4))
        }      
    })(marker, i) );        
}//end for loop

我试图在oLng = parseFloat(this.position.lng().toFixed(4))之后放置我的行代码（下面）但是我的行不会画出来。如果我将我的行代码保留在整个函数之外，它将使用默认值绘制。行创建代码（我添加了一个警报，只是为了确认我的var将捕获点击后的值）：

var arrayLine=[]
var originPoint = [new google.maps.LatLng(oLat,oLng)];
var destPoint = [new google.maps.LatLng(51.9279723,4.4904063),
                 new google.maps.LatLng(40.136482, -73.831299),
                 new google.maps.LatLng(34.0204989,-118.4117325)                 
                ];
var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW                  
};

for (var d in destPoint) {
    var t = destPoint[d];

  var linePath = new google.maps.Polyline({
    path: [originPoint[0],[t][0]], 
    strokeColor: '#4A484D',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
      icons: [{
    icon: lineSymbol,
    offset: '100%',
    repeat: '60px'
  }]

  });
   arrayLine.push(linePath)

function setLines(map) {
for (var i = 0; i < arrayLine.length; i++) {
    arrayLine[i].setMap(map);
    }
   }
  }
function addLine() {
setLines(map);
alert(parseFloat(oLat));
}

我试图查看谷歌提供的complex polyine example，但它似乎比我试图做的更加简化。

Answer 1

您需要在标记点击监听器中创建折线（可以访问标记，并且可以获得其位置）。
使用记录的方法（.getPosition（），而不是未记录的属性.position）

for (var i in points) {
    var p = points[i];
    var latlng = new google.maps.LatLng(p[1], p[2]);

    var marker = new google.maps.Marker({
        position: latlng,
        icon: points[i][3],
        zIndex: p[5],
        map: map,
        title: p[0]
    });

    overviewMarkers.push(marker);


    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            var originPoint = this.getPosition();
            var oLat = parseFloat(this.getPosition().lat().toFixed(4));
            var oLng = parseFloat(this.getPosition().lng().toFixed(4));
            for (var d in destPoint) {
                var t = destPoint[d];

                var linePath = new google.maps.Polyline({
                    path: [originPoint, [t][0]],
                    strokeColor: '#4A484D',
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    geodesic: true,
                    icons: [{
                        icon: lineSymbol,
                        offset: '100%',
                        repeat: '60px'
                    }],
                    map: map

                });
                arrayLine.push(linePath);
            }
            infowindow.setContent(points[i][6] + '<div id="infopanel">' +
                '<input onclick="addLine();" type=button value="Show Routes">' +
                '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
            infowindow.open(map, marker);
        };
    })(marker, i));
} //end for loop

working fiddle

代码段

＆＃13;

var map;
var arrayLine = [];
var overviewMarkers = [];
var oLat, oLng;

function initialize() {
  var myLatlng = new google.maps.LatLng(0, 180);
  var mapOptions = {
    zoom: 1,
    center: myLatlng
  };
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var points = [
    ['Karachi, Pakistan', 25.0111453, 67.0647043, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png', 'Overview', 1, '<h4>Sample Text</h4'],
    ['Bangkok, Thailand', 13.7246005, 100.6331108, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png',
      'Overview', 1, '<h4>Sample Text</h4>'
    ],
    ['Rotterdam, Netherlands', 51.9279723, 4.4904063, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>'],
    ['New York, NY, USA', 40.7056308, -73.9780035, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>'],
    ['Memphis, TN, USA', 35.129186, -89.9696395, 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png', 'Overview', 1, '<h4>Sample Text</h4>']
  ];

  var infowindow = new google.maps.InfoWindow();

  var originPoint = [];
  // Creates markers  
  for (var i in points) {
    var p = points[i];
    var latlng = new google.maps.LatLng(p[1], p[2]);

    var marker = new google.maps.Marker({
      position: latlng,
      icon: points[i][3],
      zIndex: p[5],
      map: map,
      title: p[0]
    });

    overviewMarkers.push(marker);


    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        var originPoint = this.getPosition();
        var oLat = parseFloat(this.getPosition().lat().toFixed(4));
        var oLng = parseFloat(this.getPosition().lng().toFixed(4));
        for (var d in destPoint) {
          var t = destPoint[d];

          var linePath = new google.maps.Polyline({
            path: [originPoint, [t][0]],
            strokeColor: '#4A484D',
            strokeOpacity: 1.0,
            strokeWeight: 2,
            geodesic: true,
            icons: [{
              icon: lineSymbol,
              offset: '100%',
              repeat: '60px'
            }],
            map: map

          });
          arrayLine.push(linePath);
        }
        infowindow.setContent(points[i][6] + '<div id="infopanel">' +
          '<input onclick="addLine();" type=button value="Show Routes">' +
          '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
        infowindow.open(map, marker);
      };
    })(marker, i));
  } //end for loop  
}
var arrayLine = [];
var originPoint = [new google.maps.LatLng(oLat, oLng)];
var destPoint = [new google.maps.LatLng(51.9279723, 4.4904063),
  new google.maps.LatLng(40.136482, -73.831299),
  new google.maps.LatLng(34.0204989, -118.4117325)
];
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
};

function addLine() {
  setLines(map);
  // alert(parseFloat(oLat));
}
google.maps.event.addDomListener(window, 'load', initialize);

function setLines(map) {
  for (var i = 0; i < arrayLine.length; i++) {
    arrayLine[i].setMap(map);
  }
}

function removeLine() {
  setLines(null);
}

＆＃13;

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#infopanel {
  width: 200px;
  height: 60px;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="panel">
  <input onclick="showFactoryMarkers();" type=button value="Show Factories">
  <input onclick="showCFSMarkers();" type=button value="Show CFS">
  <input onclick="showPortMarkers();" type=button value="Show Ports">
  <input onclick="hideMarkers();" type=button value="Hide All">
</div>
<div id="map-canvas"></div>

＆＃13;

在Mark Maps API v3上从Marker绘制折线

1 个答案: