javascript - 谷歌地图有多个位置

Question

我有网站显示职位结果列表，并且我有按位置搜索条件以在特定位置显示此职位

客户端可以选择多个位置进行搜索

我想放置带有标记的实时谷歌地图，显示工作结果的位置。

map 以最准确的结果为中心。

但问题是，如果客户搜索了多个位置，例如伦敦和吉尔福德，我如何显示此谷歌地图，我应该发送到谷歌地图的参数是什么？

任何人都可以帮助我如何在多个位置同时显示固定在 map 上的作业结果吗？

Answer 1

<script src="/Sources/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<div id="map"></div>
<div class="infobox">your box here</div>

<script type="text/javascript">
    $('document').ready(function () {
        var windowH = $(window).height();
        $('#map').css({ 'height': (windowH) + 'px' });
    });

    var locations = 
    [
        ['Bondi Beach', -33.890542, 151.274856],
        ['Coogee Beach', -33.923036, 151.259052]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
        scrollwheel: false,
        zoom: 13,
        center: new google.maps.LatLng(-33.92, 151.25),
    });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(initialLocation);
        });
    }

    var infowindow = new google.maps.InfoWindow({
        content: $('.infobox').html(),
        disableAutoPan: false,
        maxWidth: 200,
        alignBottom: true,
        pixelOffset: new google.maps.Size(35, 120),
        zIndex: null,
        boxStyle: {
            background: "#ffffff",
            width: "300px"
        },
        closeBoxURL: "",
        infoBoxClearance: new google.maps.Size(1, 1)
    });

    var marker, i;
    var image = '/Sources/images/marker.png';
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: image
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
</script>