Google maps 在谷歌地图中更新皮卡位置

我想根据用户纬度和长度显示当前位置： 下车位置始终保持静止，但上车位置（图标）需要按照lat long移动，但我找不到正确的代码方式：

$(document).ready(function() {
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var infowindow = new google.maps.InfoWindow();
var map;

function initialize() {

    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: true
    });

    var mapOptions = {
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    directionsDisplay.setMap(map);
    calcRoute();
}

function calcRoute(pickUpLat,pickUplon,droplat,droplon) {
    var pickUpLat   = "<?= $pickUpLat ?>";
    var pickUplon   = "<?= $pickUplon ?>";
    var droplat     = "<?= $model->drop_off_latitude ?>";
    var droplon     = "<?= $model->drop_off_longitude ?>";
    var start = new google.maps.LatLng(pickUpLat,pickUplon);
    var end = new google.maps.LatLng(droplat,droplon);

    createMarker(start,"<?= $model->item_delivery_title; ?>","<?= Yii::$app->urlManagerFrontEnd->createAbsoluteUrl('/images/track_route.png')?>");
    createMarker(end,"<?= $model->drop_off_address; ?>",'');

    var request = {
        origin: start,
        destination: end,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };

    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
        }
    });
}

function createMarker(latlng,title,icon) {
    var marker = new google.maps.Marker({
        position: latlng,
        animation: google.maps.Animation.DROP,
        title: title,
        icon: icon,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(title);
        infowindow.open(map, marker);
    });
}

initialize();

function makeRequest(){
        $.ajax({
        url:"<?php echo Url::base(true).'/delivery/map-data'; ?>",
        type:"POST",
        data:{"delivery_id":<?= $model->id ?>}

        })
        .done(function(result){
            var respon=JSON.parse(result);
            if(respon.status==200){
                // want to cupdate the pickup location here
            }


        });

    } 
    setInterval(makeRequest, (3000));

});

$（文档）.ready（函数（）{
方向显示；
var directionsService=new google.maps.directionsService（）；
var infowindow=new google.maps.infowindow（）；
var映射；
函数初始化（）{
directionsDisplay=新建google.maps.DirectionsRenderer({
真的吗
});
变量映射选项={
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP，
}
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
方向显示.setMap（地图）；
calcRoute（）；
}
函数计算器（pickUpLat、pickUplon、droplat、droplon）{
var pickUpLat=“”；
var pickUplon=“”；
var droplat=“”；
var-dropon=“”；
var start=new google.maps.LatLng（pickUpLat，pickUplon）；
var end=new google.maps.LatLng（dropat，dropon）；
createMarker（开始“，”）；
createMarker（结束，“，”）；
var请求={
来源：start，
目的地:完，
航路点：对，
travelMode:google.maps.Directions travelMode.WALKING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var route=response.routes[0]；
}
});
}
函数createMarker（板条、标题、图标）{
var marker=new google.maps.marker({
位置：latlng，
动画：google.maps.animation.DROP，
标题:标题,，
图标：图标，
地图：地图
});
google.maps.event.addListener（标记，'click'，函数（）{
infowindow.setContent（标题）；
信息窗口。打开（地图、标记）；
});
}
初始化（）；
函数makeRequest（）{
$.ajax({
url:“”，
类型：“POST”，
数据：{“交付id”：}
})
.完成（功能（结果）{
var respon=JSON.parse（结果）；
如果（响应状态==200）{
//想在这里确定取货地点吗
}
});
} 
setInterval（makeRequest，（3000））；
});

使请求功能始终更新提货横向和纵向： 但我找不到任何方法来移动提货图标（货车）参见图片：

---

红色标记是下车地址，货车是取车地址

您应该为取车和下车标记创建两个变量。您的createMarker函数也应该返回marker实例。收到来自服务器更新拾取标记位置的请求后

$(document).ready(function() {
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var infowindow = new google.maps.InfoWindow();
var map;
var pickUpMarker, dropToMarker; // add marker variables


function initialize() {

    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: true
    });

    var mapOptions = {
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    directionsDisplay.setMap(map);
    calcRoute();
}

function calcRoute(pickUpLat,pickUplon,droplat,droplon) {
    var pickUpLat   = "<?= $pickUpLat ?>";
    var pickUplon   = "<?= $pickUplon ?>";
    var droplat     = "<?= $model->drop_off_latitude ?>";
    var droplon     = "<?= $model->drop_off_longitude ?>";
    var start = new google.maps.LatLng(pickUpLat,pickUplon);
    var end = new google.maps.LatLng(droplat,droplon);

    if(!pickUpMarker) {
        pickUpMarker = createMarker(start,"<?= $model->item_delivery_title; ?>","<?= Yii::$app->urlManagerFrontEnd->createAbsoluteUrl('/images/track_route.png')?>");
    } else {
        pickUpMarker.setPosition(start)
    }

    if(!dropToMarker) {
        dropToMarker = createMarker(end,"<?= $model->drop_off_address; ?>",'');
    } else {
        dropToMarker.setPosition(start)
    }

    var request = {
        origin: start,
        destination: end,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };

    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
        }
    });
}

function createMarker(latlng,title,icon) {
    var marker = new google.maps.Marker({
        position: latlng,
        animation: google.maps.Animation.DROP,
        title: title,
        icon: icon,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function () {
        infowindow.setContent(title);
        infowindow.open(map, marker);
    });

    return marker;
}

initialize();
function makeRequest(){
    $.ajax({
    url:"<?php echo Url::base(true).'/delivery/map-data'; ?>",
    type:"POST",
    data:{"delivery_id":<?= $model->id ?>}

    })
    .done(function(result){
        var respon=JSON.parse(result);
        if(respon.status==200){
            // want to cupdate the pickup location here
            pickUpMarker.setPosition(result.position)
        }


    });

} 
setInterval(makeRequest, (3000));

});

$（文档）.ready（函数（）{
方向显示；
var directionsService=new google.maps.directionsService（）；
var infowindow=new google.maps.infowindow（）；
var映射；
var pickUpMarker，dropToMarker；//添加标记变量
函数初始化（）{
directionsDisplay=新建google.maps.DirectionsRenderer({
真的吗
});
变量映射选项={
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP，
}
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
方向显示.setMap（地图）；
calcRoute（）；
}
函数计算器（pickUpLat、pickUplon、droplat、droplon）{
var pickUpLat=“”；
var pickUplon=“”；
var droplat=“”；
var-dropon=“”；
var start=new google.maps.LatLng（pickUpLat，pickUplon）；
var end=new google.maps.LatLng（dropat，dropon）；
如果（！拾取标记器）{
pickUpMarker=createMarker（开始“，”）；
}否则{
拾取标记器设置位置（开始）
}
如果（！dropToMarker）{
dropToMarker=createMarker（结束，“，”）；
}否则{
dropToMarker.设置位置（启动）
}
var请求={
来源：start，
目的地:完，
航路点：对，
travelMode:google.maps.Directions travelMode.WALKING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var route=response.routes[0]；
}
});
}
函数createMarker（板条、标题、图标）{
var marker=new google.maps.marker({
位置：latlng，
动画：google.maps.animation.DROP，
标题:标题,，
图标：图标，
地图：地图
});
google.maps.event.addListener（标记，'click'，函数（）{
infowindow.setContent（标题）；
信息窗口。打开（地图、标记）；
});
返回标记；
}
初始化（）；
函数makeRequest（）{
$.ajax({
url:“”，
类型：“POST”，
数据：{“交付id”：}
})
.完成（功能（结果）{
var respon=JSON.parse（结果）；
如果（响应状态==200）{
//想在这里确定取货地点吗
拾取标记器设置位置（结果位置）
}
});
} 
setInterval（makeRequest，（3000））；
});

让我知道它是否有用：）你能帮我在pickUpMarker.setPosition（result.position）中传递数据吗？我假设它应该是pickUpMarker.setPosition（{lat:30.45，lon:70.36}）？但不工作LATLNG对象由lat和lng not lat和lon组成{lat:30.45，lng:70.36}HiŠarūnas Guobis是否可以更新路径？标记正在更新，但路径未更新是的，您可以。您需要请求DirectionService来获取新起点和终点位置的路线。在makeRequest方法中，然后获得响应，计算路线并更改标记位置。