Question

我有一组自定义位置，我有一个网页。

在我的网页上，我有一个正常运行的Google地图（使用API的v3）。

如果输入地址，它将以该地址为中心。没什么好激动的。

当用户输入某个位置时，我希望地图包含他们输入位置的某个半径范围内的任何自定义位置。

有人可以指点我这样做的API参考吗？我知道这不难，但对于我的生活，我找不到一个好的参考或例子。

Answer 1

您可以通过

计算两点之间的距离

computeDistanceBetween

more info here

有关几何库here

的更多信息

Answer 2

使用Markers非常容易。 AddCustomLocationsToMap函数可以完成下面的实际工作。感谢this blog post作为起点。

function FocusMapOnAddress(address) {
    var mapCenter;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            cdamap.setCenter(results[0].geometry.location);
            mapCenter = results[0].geometry.location;
            var marker = new google.maps.Marker({
                map: cdamap,
                position: mapCenter
            });
        } else {
            alert("Address could not be resolved due to an error: " + status);
        }
    });

    //if we actually know where they are (i.e., valid address) then zoom and show locations
    if (mapCenter != null) {
        AddCustomLocationsToMap();
        SetMapZoomLevel(mapCenter, SearchRadiusInMeters());
    }
}

var locations = [
    ['High Park', 43.6516699, -79.4652915, 4,'Our High Park Office is open from 9am - 5pm'],
    ['King Street CDA Office', 32.775692, -79.932863, 5,'Our King Stret Office is open from 8am - 4pm'],
    ['Cronulla Beach', -34.028249, 151.157507, 3,''],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2,''],
    ['Maroubra Beach', -33.950198, 151.259302, 1,'']
];

function AddCustomLocationsToMap() {
    //show custom locations, pulled from the "locations" array
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: cdamap
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(HTMLForLocation(i));
                infowindow.open(cdamap, marker);
            }
        })(marker, i));
    }
}

function HTMLForLocation(idx) {
    //return HTML for display to the user when they click on the specified location
    var selectedLocation = locations[idx];
    if (selectedLocation != null) {
        return '<b>' + locations[idx][0] + '</b>' + '<br/>' + locations[idx][4];
    }
    else {
        return "Unknown location";
    }
}

如何在谷歌地图上映射任意点？

2 个答案: