为什么标记没有显示在谷歌地图上？

Question

addMarkers 函数每 200 毫秒后向 markers 数组添加一个新的 Marker object。但是标记没有显示，也没有收到错误消息。它们仅在我移动 @987654324 的整个逻辑时显示@内initMap。

这里是js代码：

var markers=[];

var polyline;
var animation_time = 3000 //in milliseconds
var polylineIndex = 0;//Used for animation
var path;//will contain DirectionResult.routes[0].overview_path
var map;//Map Object
var directionsService;

var vehicle = {
  id:15,
  coords:[{
    latitude:19.075267,
    longitude:72.905104,
    timestamp:"1:00 PM"
  },{
    latitude:19.068223,
    longitude:72.899730,
    timestamp:"1:20 PM"
  },
    {
    latitude:19.065803,
    longitude:72.889966,
    timestamp:"1:40 PM"
  },{
    latitude:19.069554, 
    longitude:72.891981, 
    timestamp:"2:00 PM"
  }]
};



function initMap() {
  //Set up directions service
  directionsService = new google.maps.DirectionsService();

  //Map zooming and centering
  var mapOptions = {
    zoom: 15,
    center:  new google.maps.LatLng(19.069399, 72.897750) }

  //Bind map to the HTML div element
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);






  //Polyline settings
  polyline = new google.maps.Polyline({
    geodesic: true,
    strokeColor: '#0000ff',
    strokeOpacity: 1.0,
    strokeWeight: 5
  });

  //Bind polyline to map
  polyline.setMap(map);

  //Initiate request for path
  getPath();  
};

function getPath(){
  //Create request object to send to directions service
  var req = {
    origin: new google.maps.LatLng(vehicle.coords[0].latitude,vehicle.coords[0].longitude),
    destination:  new google.maps.LatLng(vehicle.coords[vehicle.coords.length - 1].latitude,vehicle.coords[vehicle.coords.length - 1].longitude),
    travelMode:google.maps.TravelMode.DRIVING,

  };
  req.waypoints = [];
  for(var i = 1;i< vehicle.coords.length - 1;i++){
    req.waypoints[i-1] = {
      location:new google.maps.LatLng(vehicle.coords[i].latitude,vehicle.coords[i].longitude),
      stopover:false
    }
  }

  //send the request to directions service
  directionsService.route(req, function(result, status) {
    //Plot the lines

    plotPath(result.routes);

  });
};

function plotPath(routes){

  //path has coordinates for all lines
  path = routes[0].overview_path;
  //set timer to add a new coordinate to polylines path,hence display a new line

    var drawTimer =  window.setInterval(function(){
    //add till we have added all coordinated
    if(polylineIndex < path.length){
      polyline.getPath().push(path[polylineIndex]/*.toJSON()*/);
      polylineIndex++;

    }
    else{
      addMarkers(vehicle.coords);
      window.clearInterval(drawTimer);
    }
  },animation_time/path.length);

};


function addMarkers(coords){
  var i = 0;
  var timer = window.setInterval(function(){
    //console.log(markers);
    //console.log(vehicle.coords[i]);
     if(i < coords.length ){
    markers.push(new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    position: {lat:coords[i].latitude,lng:coords[i].longitude},
  }));
  i++;}
    else{
    window.clearInterval(timer);
  }

  },200);

};

Answer 1

您正在初始化的map 变量是initMap 函数的本地变量，全局版本永远不会初始化。您还需要在创建标记时将地图变量添加到标记中。

从initMap中的初始化前面删除var

变化：

var map;
function initMap() {
  //Set up directions service
  directionsService = new google.maps.DirectionsService();

  //Map zooming and centering
  var mapOptions = {
    zoom: 15,
    center:  new google.maps.LatLng(19.069399, 72.897750) }

  //Bind map to the HTML div element
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

收件人：

var map;
function initMap() {
  //Set up directions service
  directionsService = new google.maps.DirectionsService();

  //Map zooming and centering
  var mapOptions = {
    zoom: 15,
    center:  new google.maps.LatLng(19.069399, 72.897750) }

  //Bind map to the HTML div element
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

在MarkerOptions 中添加map 引用：

      markers.push(new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        position: {
          lat: coords[i].latitude,
          lng: coords[i].longitude
        },
        map: map
      }));

proof of concept fiddle

代码 sn-p：

var markers = [];

var polyline;
var animation_time = 3000 //in milliseconds
var polylineIndex = 0; //Used for animation
var path; //will contain DirectionResult.routes[0].overview_path
var map; //Map Object
var directionsService;

var vehicle = {
  id: 15,
  coords: [{
    latitude: 19.075267,
    longitude: 72.905104,
    timestamp: "1:00 PM"
  }, {
    latitude: 19.068223,
    longitude: 72.899730,
    timestamp: "1:20 PM"
  }, {
    latitude: 19.065803,
    longitude: 72.889966,
    timestamp: "1:40 PM"
  }, {
    latitude: 19.069554,
    longitude: 72.891981,
    timestamp: "2:00 PM"
  }]
};

function initMap() {
  //Set up directions service
  directionsService = new google.maps.DirectionsService();

  //Map zooming and centering
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(19.069399, 72.897750)
  }

  //Bind map to the HTML div element
  map = new google.maps.Map(document.getElementById("map"), mapOptions);

  //Polyline settings
  polyline = new google.maps.Polyline({
    geodesic: true,
    strokeColor: '#0000ff',
    strokeOpacity: 1.0,
    strokeWeight: 5
  });

  //Bind polyline to map
  polyline.setMap(map);

  //Initiate request for path
  getPath();
};

function getPath() {
  //Create request object to send to directions service
  var req = {
    origin: new google.maps.LatLng(vehicle.coords[0].latitude, vehicle.coords[0].longitude),
    destination: new google.maps.LatLng(vehicle.coords[vehicle.coords.length - 1].latitude, vehicle.coords[vehicle.coords.length - 1].longitude),
    travelMode: google.maps.TravelMode.DRIVING,

  };
  req.waypoints = [];
  for (var i = 1; i < vehicle.coords.length - 1; i++) {
    req.waypoints[i - 1] = {
      location: new google.maps.LatLng(vehicle.coords[i].latitude, vehicle.coords[i].longitude),
      stopover: false
    }
  }

  //send the request to directions service
  directionsService.route(req, function(result, status) {
    //Plot the lines

    plotPath(result.routes);

  });
};

function plotPath(routes) {

  //path has coordinates for all lines
  path = routes[0].overview_path;
  //set timer to add a new coordinate to polylines path,hence display a new line

  var drawTimer = window.setInterval(function() {
    //add till we have added all coordinated
    if (polylineIndex < path.length) {
      polyline.getPath().push(path[polylineIndex] /*.toJSON()*/ );
      polylineIndex++;

    } else {
      addMarkers(vehicle.coords);
      window.clearInterval(drawTimer);
    }
  }, animation_time / path.length);

};


function addMarkers(coords) {
  var i = 0;
  var timer = window.setInterval(function() {
    //console.log(markers);
    //console.log(vehicle.coords[i]);
    if (i < coords.length) {
      markers.push(new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        position: {
          lat: coords[i].latitude,
          lng: coords[i].longitude
        },
        map: map
      }));
      i++;
    } else {
      window.clearInterval(timer);
    }

  }, 200);

};
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>

Answer 2

创建标记后需要调用setMap：

function addMarkers(coords){
    var i = 0;
    var timer = window.setInterval(function() {
        if (i < coords.length) {
            var marker = new google.maps.Marker({
                animation: google.maps.Animation.DROP,
                position: {lat:coords[i].latitude,lng:coords[i].longitude},
            });
            markers.push(marker);
            marker.setMap(/* your map reference */);
            i++;
        } else {
            window.clearInterval(timer);
        }
    }, 200);
}

来自Google's documentation：

[...] 使用标记选项中的map 属性在构建标记时将标记放置在地图上。或者，您可以使用标记的setMap() 方法直接将标记添加到地图[...]