Question

我有网站显示的工作结果列表，我有按地点搜索标准，以便在特定位置显示此工作

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

我想把带有标记的实时谷歌地图显示作业结果。

以最准确的结果为中心映射。

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

任何人都可以帮助我如何在多个位置同时显示工作结果并固定在地图上？

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>

Answer 2

//包括谷歌地图链接和谷歌地图div id“map”

  var map = null;
  var geocoder = new google.maps.Geocoder();

var locations = 
    [
        ['Bondi Beach', -33.890542, 151.274856, "Bondi Beach Jobs"], // display content place 3rd element
        ['Coogee Beach', -33.923036, 151.259052, "Coogee Beach Jobs"] // display content place 3rd element
    ];
map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: new google.maps.LatLng(-33.890542, 151.274856),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();
var marker, i;

setTimeout(function () {
for (i = 0; i < locations.length; i++) {
  //set location with address
  if(locations[i][0] != "") {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) { //getPosition().toUrlValue(6)
    return function() {
        // display content place 3rd element
        infowindow.setContent(locations[i][3] + "<br>coordinates: " + marker.getPosition().toUrlValue(6));
        infowindow.open(map, marker);
    }
  })(marker, i));

  }

}
},1000);

谷歌地图与多个位置

2 个答案: