Question

我正在开发一款应用程序，告诉用户他可以选择的最佳选择。为此，我使用谷歌地图技术。

我目前所做的是：

向用户显示他当前的位置
向用户显示他可以去的地方（使用标记和信息窗口）
最后是地图下方的列表，其中包含地图上标记的每个标记的位置名称。

现在在列表附近我有一个按钮调用查看位置，我希望当用户点击按钮时，它会将他引导到该特定标记并打开信息选项卡。

目前我的代码包含以下内容：

    map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

        var marker = new google.maps.Marker({
            position: CurrentLoc,
            map: map
        });

        document.getElementById('LocationList').innerHTML = '';

        var request = {
            location: CurrentLoc,
            radius: '2000',
            types: ['park']
        };

        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);

    function callback(results, status) {

        if (status == google.maps.places.PlacesServiceStatus.OK) {

            clearOverlays();
            htmlSugLoc = '<ul id="List" class="List ui-listview" data-role="listview">';

            for (var i = 0; i < results.length; i++) {
                var place = results[i];
                createMarker(results[i],i);
            }

            htmlSugLoc += '</ul>';
            document.getElementById('LocationList').innerHTML = htmlSugLoc;

        }
        else {
            clearOverlays();

            document.getElementById('LocationList').innerHTML = "<p>No Suitable Locations were found</p>";

            //alert('No Locations were found');
        }
    }


        function createMarker(place,selectID) {

        var placeLoc = place.geometry.location;
        var imageStar = "images/star.png";

        var marker = new google.maps.Marker({
            map: map,
            icon: imageStar,
            position: place.geometry.location
        });

        var infowindow  = new google.maps.InfoWindow();
            google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(place.name);
            infowindow.open(map, this);
        });

        markersArray.push(marker);

        var odd = selectID % 2;
        if (odd == true) {
            htmlSugLoc += '<li style="background-color:#CCCCCC;" class="ui-li ui-li-static ui-btn-up-c ui-first-child">';
        }
        else {
            htmlSugLoc += '<li style="background-color:#E6E6E6;" class="ui-li ui-li-static ui-btn-up-c ui-first-child">';
        }

        htmlSugLoc += place.name;

        htmlSugLoc += '<div class="ViewLocation" style="float:right;margin-right:10px;margin-top:-5px;">';
        htmlSugLoc += '<input id="Meet'+selectID+'" type="hidden" value="'+placeLoc+'"/>';
        htmlSugLoc += '<a id="'+selectID+'" href="#" onclick="SeeMeetLocation(this.id);return false;"><img src="images/SeeLocation.png" width="100%" height="100%"/></a>';
        htmlSugLoc += '</div>';

        htmlSugLoc += '</li>';

    }

    // Removes the overlays from the map, but keeps them in the array
    function clearOverlays() {
      if (markersArray) {
        for (i in markersArray) {
          markersArray[i].setMap(null);
        }
      }
    }

function SeeMeetLocation(VariableID) {

    var InputID = "";
    var Placelocation = "";

    InputID = "Meet"+VariableID;


    Placelocation = document.getElementById(InputID).value;
}

此外，你可以看到现在的半径是固定的2000.是否有可能不使用半径，我使用城镇/地名，例如曼彻斯特，巴勒莫等，以便它只覆盖那个位置。事情是用户的CurrentLoc（位置）总是在变化。

我的最后一个问题是，我可以以某种方式向他显示他与所选标记之间的距离。

由于

Keith Spiteri

Answer 1

在SeeMeetLocation中，您需要trigger该特定标记上的点击事件。您可能还希望将地图同时居中在标记上。您可能需要通过一些内容来指示通过SeeMeetLocation调用哪个标记。

onclick="SeeMeetLocation(this.id, ' + markersArray.length-1 + ');

然后：

function SeeMeetLocation(VariableID, marker) {
    google.maps.event.trigger(markersArray[marker], 'click');
    map.setCenter(markersArray[marker].getPosition());

最后，要计算两点之间的距离，请使用geometry library，您可以尝试类似：

function calculateDistances(start,end) {
    var distances = {};

    distances.metres = google.maps.geometry.spherical.computeDistanceBetween(start, end);
    distances.km = Math.round(distances.metres / 1000 *10)/10;
    distances.miles = Math.round(distances.metres / 1000 * 0.6214 *10)/10;

    return distances ;
}

确保在API中加载时添加libraries=geometry参数。

Google地图开发人员会转到特定位置

1 个答案: