Question

我刚开始使用谷歌地图API，我觉得我正在重新发明轮子。

我想嵌入一张以办公室位置为中心的地图。在地图一侧有两个方框：“从：”和“收件人：”“收件人：”已经填写了办公室的地址。当用户输入地址并点击“确定”时，嵌入的地图会更新以显示行车路线。下面显示生成的行车路线。

我知道谷歌提供了一个非常基本的嵌入式地图，但在我看来，它不适合专业网站。我绝对准备（如有必要）手工编写代码。我只需要相信这个问题已经解决了一百万次。

谢谢！

Answer 1

在Google地图文档中查看此示例及其源代码 - http://code.google.com/apis/maps/documentation/javascript/examples/directions-panel.html

此处有更多示例 - http://code.google.com/apis/maps/documentation/javascript/examples/

Answer 2

斯图尔特的链接非常有用，但仍缺乏具体的有用工具。我不得不将它们中的一些合并在一起，以及我在网上找到的一些东西，以创建我想要的地图。

这是一个javascript文件，可以完成我想要做的事情。

var resizable = false;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var mapCanvas;
var mouseX, mouseY, drawnX, drawnY, diffX, diffY;
var directionsShowing = false;
var officeMarker;

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    mapCanvas = document.getElementById("map");
    document.onmousemove = watchMouse;

    var officeLocation = new google.maps.LatLng(<Lat>, <Long>);
    var latlng = officeLocation;
    var mapOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    setupResizeBar(map);

    var markerOptions = {
        position: officeLocation,
        title: "Title"
    }

    officeMarker = new google.maps.Marker(markerOptions);
    officeMarker.setMap(map);   

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var request = {
        origin:start, 
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            directionsShowing = true;
            officeMarker.setVisible(false);
        } else {
            directionsShowing = false;
        }
    });
}

function setupResizeBar(map) {

    resizeButton = document.createElement("div");
    resizeButton.style.position = "absolute";
    resizeButton.style.bottom = "0px";
    resizeButton.style.height = "8px";
    resizeButton.style.zIndex = "9999999";
    resizeButton.style.width = "100%";
    resizeButton.style.backgroundImage = "url('/images/resize.gif')";
    resizeButton.style.backgroundRepeat = "repeat";
    resizeButton.style.cursor = "n-resize";

    resizeButton.onmousedown = function() { 
        resizable = true; 
        return false; 
    }
    document.onmouseup = function() {
        google.maps.event.trigger(map, 'resize');
        resizable = false; 
    }

    //mapCanvas = document.getElementById("map");
    mapCanvas.appendChild(resizeButton);

    return resizeButton;
}

function reverseRoute () {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    document.getElementById("start").value = end;
    document.getElementById("end").value = start;
    if( directionsShowing ) {
        calcRoute();
    }
}

function watchMouse(e) {
    var sx = window.scrollX || document.documentElement.scrollLeft || 0;
    var sy = window.scrollY || document.documentElement.scrollTop || 0;

    if(!e) e = window.event; // IEs event definition
    mouseX = e.clientX + sx;
    mouseY = e.clientY + sy;

    var deltaX = mouseX - diffX;
    var deltaY = mouseY - diffY;

    diffX = mouseX;
    diffY = mouseY;

    if(resizable) changeMapSize(deltaY);

    return false;
}

function changeMapSize(dy) {

    //var mapCanvas = document.getElementById("map");
    var height =  parseInt(mapCanvas.style.height);
    if(height < 150) { height = 150; }

    mapCanvas.style.height= (height + dy) + "px";
    // Continuously check resize
    //
}

谷歌地图：用于“办公室指示”的嵌入式代码？

2 个答案: