Question

我正在寻找一种在我的网页上实施Google地图的方法，同时不断缩放到不同的地方（比如10个地方）并循环播放。 Just Park有类似的东西（在桌面上） - www.justpark.com。

我有点难过从哪里开始真的。任何指针都会很棒。

感谢。

Answer 1

Google Maps API文档是一个很好的起点：https://developers.google.com/maps/documentation/javascript/tutorial

您可能还需要使用Google Geocoding API来检索坐标（lat＆amp; lon），以根据特定地址和位置来映射您的标记。链接到此处的文档：https://developers.google.com/maps/documentation/geocoding/

一旦你有了你想要的标记，你可以在延迟的情况下循环它们。

注意：可以在Google Maps API文档

中找到信息窗口功能

Answer 2

希望这可以帮助你demo link .. 来自geocodezip

 google.maps.event.addDomListener(window, 'load', function () {
    load(-5.162764, 119.443118, 13);
});
var customIcons = {
    restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    },
    bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    }
};

var cluster = [];
var infowindow = new google.maps.InfoWindow();

function load(lt, lg, zoom) {

    var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(lt, lg),
        zoom: zoom,
        mapTypeId: 'roadmap'
    });




    // downloadUrl("phpsqlajax_genxml3.php ", function(data) {
    //    var xml = data.responseXML;
    var bounds = new google.maps.LatLngBounds();
    var xml = parseXml(sampleXmlData);
    var markers = xml.documentElement.getElementsByTagName("marker");
    var sidebarStr = "";
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
        bounds.extend(point);
        var html = "<b>" + name + "</b> <br/>" + address;
        var icon = customIcons[type] || {};


        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
        });


        cluster.push(marker);
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function (e) {
                map.setZoom(17);
                map.setCenter(marker.getPosition());
                infowindow.setContent("Nama Pelanggan   : " + markers[i].getAttribute("name") + "<br/>" +
                    "Alamat Pelanggan : " + markers[i].getAttribute("address") + "<br/>" +
                    "Wilayah          : " + markers[i].getAttribute("type") + "<br/>" +
                    "coords:" + marker.getPosition().toUrlValue(6));

                infowindow.open(map, marker);
            };
        })(marker, i));
        sidebarStr += "<a href='javascript:info("+(cluster.length-1)+");'>"+name+"</a><br/>";
        
    }
    document.getElementById('sidebar').innerHTML = sidebarStr;

    var a = 15;
    var mc = new MarkerClusterer(map, cluster, {
        maxZoom: 15
    });
    map.fitBounds(bounds);

    // });
}


function downloadUrl(url, callback) {
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };

    request.open('GET', url, true);
    request.send(null);
}



// google.maps.event.trigger(marker,'click');

function info(x) {
    google.maps.event.trigger(cluster[x], 'click');
}

function replaceAll(find, replace, str) {
    return str.replace(new RegExp(find, 'g'), replace);
}

function get() {
    var tempout;
    $.post('tampil.php', {
        ambil: frm.ambil.value
    },

    function (output) {

        var tampung = output.replace("[", "");
        tampung = tampung.replace("]", "");
        tampung = replaceAll('"', "", tampung);
        var kode = tampung.split(",");

        var latx = kode[3];
        var lngx = kode[4];

        load(latx, lngx, 17);

        info(kode[0]);


        $('#nama').html(output).show();
    }

    );


}



function doNothing() {}

function parseXml(str) {
    if (window.ActiveXObject) {
        var doc = new ActiveXObject('MicrosoftXMLDOM');
        doc.loadXML(str);
        return doc;
    } else if (window.DOMParser) {
        return (new DOMParser()).parseFromString(str, 'text/xml');
    }
}
var sampleXmlData = '<markers><marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/><marker name="Buddha Thai and Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/><marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/><marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant"/><marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar"/><marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant"/><marker name="Mama&apos;s Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976 " lng="-122.345467" type="bar"/><marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar"/><marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant"/></markers>';

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

<form name="frm">
    <center>
        <input type="text" id="ambil" name="ambil" value="" />
        <input type="button" id="Cari" value="Cari" onClick="get(); " />
        <br/>
        <div id="nama"></div>
    </center>
<a href="#" onclick="info(6);">Open Info Window</a>

</form>
<div id="sidebar" style="width: 600px;"></div>
<div id="map" style="width: 600px; height: 400px"></div>

谷歌地图，缩放到不同点

2 个答案: