addMarkers
函数在每200ms后添加一个新的Marker object
到markers
数组。但是没有显示标记,也没有收到任何错误消息。它们仅在我移位时显示addMarkers
中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);
};
答案 0 :(得分:1)
您正在初始化的map
变量是initMap
函数的本地变量,从不初始化全局版本。您还需要在创建时将地图变量添加到标记。
从var
initMap
变化:
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
}));
代码段
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>
答案 1 :(得分:0)
创建标记后,您需要致电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);
}
[...]使用标记选项中的
map
属性,在构建标记时将标记放置在地图上。或者,您可以使用标记的setMap()
方法直接将标记添加到地图中[...]