Question

我已经为飞行模式实现了地图路径路由，它正常工作，但现在我必须使用标签/指针图像为每个点实现标记，如何使用以下代码片段执行此操作：

function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 62.533457, lng: 155.799957},
          mapTypeId: 'terrain'
        });

        flightPathCoordinates = [
          {lat: 34.053184, lng: -118.289547},
          {lat: 19.089681, lng: 72.865486}, 
          {lat: 39.882300, lng: 116.289431},
          {lat: 56.199034, lng: 92.734745}                  
        ];         

        flightPath = new google.maps.Polyline({
          path: flightPathCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });            

        console.log(flightPath);
        flightPath.setMap(map);
}

google.maps.event.addDomListener(window, "load", initMap);

</script>

Answer 1

您必须先设置标记。获取数组中的所有地址以使其动态化。

$ address = array（＆＃34; Kolkata＆＃34;，＆＃34; Darjeeling＆＃34;，＆＃34; New + delhi＆＃34;，＆＃34; Jaipur＆＃34;，＆＃34;比卡内尔＆＃34;＆＃34; Korachi＆＃34;＆＃34;拉杰科德＆＃34;＆＃34;孟买＆＃34;＆＃34;果阿＆＃34;＆＃34; Mangaluru＆＃34;＆＃34;高知＆＃34;＆＃34;科伦坡＆＃34;＆＃34;奈＆＃34;＆＃34;贡土尔＆＃34;＆＃34;维萨卡帕特＆＃34;，＆＃34;普瑞＆＃34;＆＃34; Digha＆＃34;＆＃34;加尔各答＆＃34）;

Google地图从此地址中提取lat lang。我想这会对你有帮助。

function initMap(){
         var map;
              var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 0,
                mapTypeId: google.maps.MapTypeId.ROADMAP },
              function initialize() {
                map = new google.maps.Map(document.getElementById("map"), mapOptions);

                var userCoor = $.parseJSON('<?php echo json_encode($address_arr); ?>');
                var userCoorPath = new Array(userCoor.length);
                for(var j = 0; j < userCoor.length-1; j++){
                    userCoorPath[j] = new Array(new google.maps.LatLng(userCoor[j][1],userCoor[j][2]),new google.maps.LatLng(userCoor[j+1][1],userCoor[j+1][2]));
                    console.log(j);
                    var infowindow = new google.maps.InfoWindow();
                    var lineSymbol = {
                                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
                            };          
                            var userCoordinate = new google.maps.Polyline({
                            path: userCoorPath[j],
                            strokeColor: "#FF0000",
                            strokeOpacity: 1,
                            strokeWeight: 2,
                             icons: [{
                            icon: lineSymbol,
                            offset: '100%'
                            }]
                            });
                            userCoordinate.setMap(map);
                }

                var marker, i;
                var all_markers = new Array(userCoor.length);
                var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

                for (i = 0; i < userCoor.length; i++) {
                    console.log("inner loop->"+i);
                    if(userCoor[0][1] == userCoor[i][1] && userCoor[0][2] == userCoor[i][2])
                    {
                      marker = new google.maps.Marker({
                        position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
                        map: map,
                        label: 'A'
                      });
                    }else{
                      marker = new google.maps.Marker({
                        position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
                        map: map,
                        label: labels[i % labels.length]
                      });
                    }
                  all_markers[i] = marker;

                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                      infowindow.setContent(userCoor[i][0]);
                      infowindow.open(map, marker);
                    }
                  })(marker, i));

                }
                  var bound = new google.maps.LatLngBounds();

                for (var k in all_markers) {
                    bound.extend(all_markers[k].getPosition());
                }
                map.fitBounds(bound);

             }
              google.maps.event.addDomListener(window, 'load', initialize);
    }

Answer 2

flightPathCoordinates = [
      {lat: 34.053184, lng: -118.289547},
      {lat: 19.089681, lng: 72.865486}, 
      {lat: 39.882300, lng: 116.289431},
      {lat: 56.199034, lng: 92.734745}                  
    ];  

flightPathCoordinates.forEach( function(coordinate) {
    var marker = new google.maps.Marker({
      position: coordinate,
      map: map
    });
});

我已经为飞行模式实施了地图路线，但无法在其上绘制标记？

2 个答案: