谷歌地图 - 如果谷歌无法确定地址位置,请禁用该元素

时间:2014-09-30 23:28:40

标签: javascript jquery google-maps google-maps-api-3

我正在使用以下脚本将待售房屋加载到我的Google地图上。我想知道这是否可能,如果是 - 我需要一位非常优秀的Google Map程序员帮助添加它。

我在寻找什么
如果Google无法找到左侧面板中的某个地址或超出边界,则仍会将元素和地址加载到左侧面板 - 但是通过向该元素添加类来处于禁用状态。可以这样做吗?

映射边界
这是边界,如果标记在此区域内,则添加标记,否则禁用该元素。如果无法完成边界,我会选择Google找不到它 http://www.freemaptools.com/radius-around-point.htm?clat=44.512176171071054&clng=-81.08184814453125&r=96.39586143951128&lc=FFFFFF&lw=1&fc=00FF00

脚本我正在使用
http://www.raymondcamden.com/demos/2012/dec/1/new4.html

这就是我迄今为止的目标
我将基于上面网站的跟踪脚本放在一起,只是想在这个概念中添加缺少的位置元素。

var map;
var markers = [];
var lastinfowindow;
var locIndex;
if (!Array.prototype.forEach) {
    Array.prototype.forEach = function(fn, scope) {
        for (var i = 0, len = this.length; i < len; ++i) {
            fn.call(scope, this[i], i, this);
        }
    }
}
var data = [
    {address:'123 GODERICH ST GODERICH ONTARIO',title:'123 GODERICH ST'},
    {address:'123 KNOWLES LANE KINCARDINE ONTARIO',title:'123 KNOWLES LANE'}
];
function Initialize() {
    var latlng = new google.maps.LatLng(44.00, -80.00);
    var mapOptions = {
        zoom : 8,
        center : latlng,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        scaleControl : true,
        mapTypeControl : false,
        navigationControlOptions : {
            style : google.maps.NavigationControlStyle.SMALL
        },
        scrollwheel : false,
        minZoom : 7,
        maxZoom : 15,
        keyboardShortcuts : false,
        disableDoubleClickZoom : true,
        draggable : true,
        backgroundColor : '#FFFFFF'
    };
    var mapStyles = [{
        featureType: 'poi',
        stylers: [{
            visibility: 'off'
        }]
    }];
    var styledMap = new google.maps.StyledMapType(mapStyles, {name: 'Styled Map'});
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    geocoder = new google.maps.Geocoder();
    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');
    icon = new google.maps.MarkerImage('/pointer.png', new google.maps.Size(19, 29), new google.maps.Point(0, 0), new google.maps.Point(8, 29));
    data.forEach(function(mapData,idx) {
        geocoder.geocode({'address':mapData.address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location,
                    title: mapData.title,
                    icon: icon
                });
                var contentHtml = "<div style='width:300px;height:200px'><h3>"+mapData.title+"</h3>"+mapData.address+"</div>";
                var infowindow = new google.maps.InfoWindow({
                    content: contentHtml
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
                marker.locid = idx+1;
                marker.infowindow = infowindow;
                markers[markers.length] = marker;
                var sideHtml = '<p class="loc" data-locid="'+marker.locid+'"><b>'+mapData.title+'</b><br/>';
                     sideHtml += mapData.address + '</p>';
                     $('#locations').append(sideHtml); 
            }
        });
    });
}
window.onload = Initialize;

我目前正在查看是否可以执行此操作并将在此过程中进行更新。谢谢!

1 个答案:

答案 0 :(得分:0)

您需要检查地理编码调用的状态是否为

ZERO_RESULTS
INVALID_REQUEST

或Maps API中的其他status codes之一,例如

geocoder.geocode({'address':mapData.address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
       //handle valid address search
    } else if (status === google.maps.GeocoderStatus.INVALID_REQUEST 
                  || status === google.maps.GeocoderStatus.ZERO_RESULTS) {
       //handle no results returned
    }
}

如果您有地理编码请求返回其中一种状态,则可以将该元素添加到地图中,但将标记设置为降低可见性状态或您喜欢的其他选项。对于类似的内容,请查看上面链接中的MarkerOptions和相关的Marker文档。