Question

我试图在用户之间获取两个丢弃标记之间的路径，我在使用两个输入字段之前做了但现在我试图在用户之间获取两个丢弃标记之间的方向。这两个标记将由用户随机删除

<div style="margin-bottom: 10px;">
        <label>Location A: </label>
        <label id="start" ></label>
    </div>

    <div style="margin-bottom: 10px;">
        <label>Location B :</label>
        <label id="end" ></label>
    </div>

    <div style="margin-bottom: 10px;">

        <button onclick="javascript:calculateRoute()" type="button" style="width: 150px">Calculate Distance</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label style="color: red; font-weight: bold" id="lblDistance"></label>
    </div>

    <div style="float: left; margin-top: 10px; margin-left: -3px;">

        <button type="button" id="pathbtn" style="width: 115px">Shortest Path</button>
    </div>

</div>

的JavaScript

function initialize() {


var long = parseFloat(document.getElementById("Langitud").value);
var lat = parseFloat(document.getElementById("Latitud").value);
var zoomMap = parseFloat(document.getElementById("Zoom").value)
var disableDefaultUIMap = document.getElementById("disableDefaultUI").checked;
var scrollwheelMap = document.getElementById("scrollwheel").checked;
var draggableMap = document.getElementById("draggable").checked;
var maxZoomMap = parseInt(document.getElementById("maxZoom").value);
var minZoomMap = parseInt(document.getElementById("minZoom").value);
var myCenter = new google.maps.LatLng(long, lat);
var maptype = parseInt(document.getElementById("MapTypeSelect").value)
var mapTypeIdMap;
switch (maptype)
{
    case 1:
        mapTypeIdMap = google.maps.MapTypeId.ROADMAP;
        break;
    case 2:
        mapTypeIdMap = google.maps.MapTypeId.SATELLITE;
        break;
    case 3:
        mapTypeIdMap = google.maps.MapTypeId.HYBRID;
        break;
    case 4:
        mapTypeIdMap = google.maps.MapTypeId.TERRAIN;
        break;
}



var mapProp = {
    center: myCenter,
    zoom: zoomMap,
    mapTypeId: mapTypeIdMap,
    disableDefaultUI: disableDefaultUIMap,
    scrollwheel: scrollwheelMap,
    draggable: draggableMap,
    maxZoom: maxZoomMap,
    minZoom: minZoomMap


};

var iconMarker =  document.getElementById("sc").innerHTML;

var conte = document.getElementById("conte").value;

var draggableMarker = document.getElementById("draggableMarker").checked;

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



var listenerHandle = google.maps.event.addListener(map, 'mousedown', function (e) {

    var latLng = e.latLng;

    marker = new google.maps.Marker({
        position: latLng,
        map: map,
        draggable: true,
        icon: image

    });

    //// to get data about mouse position
    //mMoveHandler = google.maps.event.addListener(map, 'mousemove', function (e) {
    marker.setPosition(e.latLng);
    //});


    //google.maps.event.removeListener(listenerHandle);


    document.getElementById("looo").innerHTML = "Lattitude: " + e.latLng.lat() + '  <br/>   ' + "Longitude: " + e.latLng.lng();
});


//--------------------
var image = {
    url: iconMarker,
    // This marker is 20 pixels wide by 32 pixels high.
    size: new google.maps.Size(30, 32),
    //// The origin for this image is (0, 0).
    //origin: new google.maps.Point(0, 0),
    //// The anchor for this image is the base of the flagpole at (0, 32).
    //anchor: new google.maps.Point(0, 32)
};



var marker = new google.maps.Marker({
    position: myCenter,
    map: map,
    draggable: draggableMarker,
    animation: google.maps.Animation.BOUNCE,
    icon: image


});



var infowindow = new google.maps.InfoWindow({


    content: conte,
});
google.maps.event.addListener(marker, 'click', function () {
    infowindow.open(map, marker);

});
infowindow.open(map, marker);
marker.setMap(map);


document.getElementById("cen").innerHTML = " new google.maps.LatLng( " + long + " , " + lat + " )";
document.getElementById("zoo").innerHTML = " " + zoomMap;
document.getElementById("dis").innerHTML = " " + disableDefaultUIMap;
document.getElementById("swh").innerHTML = " " + scrollwheelMap;
document.getElementById("drag").innerHTML =" "+ draggableMap;
document.getElementById("maxzom").innerHTML = " " + maxZoomMap;
document.getElementById("minzom").innerHTML =" "+ minZoomMap;
document.getElementById("pos").innerHTML = " new google.maps.LatLng( " + long + " , " + lat + " )";
document.getElementById("dra").innerHTML =" "+ draggableMarker;
document.getElementById("contet").innerHTML = " " + conte;
document.getElementById("mapt").innerHTML = " google.maps.MapTypeId." + mapTypeIdMap.toUpperCase();

}

Answer 1

Google地图指南API需要3个参数：

origin - 出发点的长篇名单或长文本名称

destination - 到达点的latitute / longiture或纯文本名称

当然是您的API密钥

要在地图上使用删除的标记，您可以在每个标记对象上使用这些函数来获取它们的坐标：

var lat = Marker.getPosition().lat();
var lng = Marker.getPosition().lng();

只需在新的异步API调用上传递坐标：

var target = 'https://maps.googleapis.com/maps/api/directions/json?orgin='
+originMarkerCoords+'&destination='
+destinationMarkerCoords+'&key='+apiKey;

参考：https://developers.google.com/maps/documentation/directions/intro

希望有所帮助

如何使用Google API和JavaScript

1 个答案: