Javascript 谷歌地图开发者前往特定地点

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

我现在做的是：

向用户显示其当前位置

向用户展示他可以去的地方（带有标记和信息窗口）

最后，在地图下面列出地图上每个标记的位置名称

现在，在列表附近，我有一个按钮调用See Location，我希望当用户单击按钮时，它会将他指向特定的标记并打开info选项卡

目前，我的代码由以下部分组成：

    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;
}

map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
var marker=new google.maps.marker({
位置：CurrentLoc，
地图：地图
});
document.getElementById（'LocationList'）。innerHTML=''；
var请求={
地点：CurrentLoc，
半径：“2000”，
类型：[“公园”]
};
var service=newgoogle.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
clearOverlays（）；
htmlSugLoc='
；
对于（var i=0；i”；
//警报（“未找到任何位置”）；
}
}
函数createMarker（place，selectID）{
var placeLoc=place.geometry.location；
var imageStar=“images/star.png”；
var marker=new google.maps.marker({
地图：地图，
图标：imageStar，
位置：place.geometry.location
});
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（标记，'click'，函数（）{
infowindow.setContent（place.name）；
打开（地图，这个）；
});
markersArray.push（marker）；
var odd=selectID%2；
如果（奇数==真）{
htmlSugLoc+='
；
}
否则{
htmlSugLoc+='
；
}
htmlSugLoc+=place.name；
htmlSugLoc+=''；
htmlSugLoc+=''；
htmlSugLoc+=''；
htmlSugLoc+=''；
htmlSugLoc+='
'；
}
//从地图中删除覆盖，但将其保留在阵列中
函数clearOverlays（）{
if（markersArray）{
for（markersArray中的i）{
markersArray[i].setMap（空）；
}
}
}
函数SeeMeetLocation（变量ID）{
var InputID=“”；
var Placelocation=“”；
InputID=“满足”+变量ID；
Placelocation=document.getElementById（InputID）.value；
}

另外，正如你现在看到的，半径是固定的2000。我是否可以使用城镇/地名来代替半径，例如曼彻斯特、巴勒莫等，这样它将只覆盖该位置。问题是用户的CurrentLoc（位置）总是变化的

我的最后一个问题是，我能不能告诉他，他和所选标记之间的距离

谢谢

---

Keith Spiteri

在See MeetLocation中，您需要

触发该特定标记上的单击事件。您可能还希望同时将地图居中放置在标记上。您可能需要通过调用
seemetlocation
传递一些信息来指示哪个标记处于打开状态

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

然后：

最后，要计算两点之间的距离，请使用以下方法：

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
参数。
谢谢。回答了两个问题。关于半径，将来可以用其他方法代替吗？不要在同一篇文章中问3个不同的问题，你应该发布3个独立的问题。我问了3个问题，因为它们相互关联
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 ;
}