Javascript 谷歌地图API v3地理编码

如果您能提供以下帮助，我们将不胜感激。我正在使用下面的JS代码显示一张谷歌地图，上面有一个可重新调整大小的圆圈覆盖，以输出一个中心点坐标、半径和边界框：

function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
draggable: true,
title: 'Drag to set centre',
icon: 'images/mapicon3.png'
});
marker.bindTo('map', this);
marker.bindTo('position', this);
var radiusWidget = new RadiusWidget();
radiusWidget.bindTo('map', this);
radiusWidget.bindTo('center', this, 'position');
this.bindTo('distance', radiusWidget);
this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
function RadiusWidget() {
var circle = new google.maps.Circle({
fillColor: '#efefef',
fillOpacity: 0.5,
strokeColor: '#000',
strokeOpacity: 1.0,
strokeWeight: 2
});
this.set('distance', 5);
this.bindTo('bounds', circle);
circle.bindTo('center', this);
circle.bindTo('map', this);
circle.bindTo('radius', this);
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
RadiusWidget.prototype.addSizer_ = function() {
var sizer = new google.maps.Marker({
draggable: true,
title: 'Drag to expand search area',
icon: 'images/mapicon2.png'
});
sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function() {
me.setDistance();
});
};
RadiusWidget.prototype.center_changed = function() {
var bounds = this.get('bounds');
if (bounds) {
var lng = bounds.getNorthEast().lng();
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371;
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};
RadiusWidget.prototype.setDistance = function() {
var pos = this.get('sizer_position');
var center = this.get('center');
var distance = this.distanceBetweenPoints_(center, pos);
var distance = Math.round(distance*100)/100
this.set('distance', distance);
};
function init() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(geoip_latitude(), geoip_longitude()), zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var distanceWidget = new DistanceWidget(map);
google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
displayInfo(distanceWidget);
});
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
displayInfo(distanceWidget);
});
mapDiv.style.width = (viewportwidth)+"px";
mapDiv.style.height = (viewportheight)+"px";
}
function displayInfo(widget) {
var info = document.getElementById('info');
info.innerHTML = '<form action="/search" method="post"><input type="hidden" name="position" value="' + widget.get('position') + '" /><input type="hidden" name="distance" value="' + widget.get('distance') + '" /><input type="hidden" name="bounds" value="' + widget.get('bounds') + '" /><input type="submit" value="Submit" /></form>';
}
google.maps.event.addDomListener(window, 'load', init);

功能距离小部件（地图）{
此.set（'map'，map）；
this.set（'position'，map.getCenter（））；
var marker=new google.maps.marker({
真的，
标题：“拖动以设置中心”，
图标：“images/mapicon3.png”
});
marker.bindTo（'map'，this）；
标记。bindTo（'位置'，本）；
var radiusWidget=new radiusWidget（）；
radiusWidget.bindTo（'map'，this）；
bindTo（'center'，this，'position'）；
这个.bindTo（'distance'，radiusWidget）；
this.bindTo（'bounds'，radiusWidget）；
}
DistanceWidget.prototype=new google.maps.MVCObject（）；
函数RadiusWidget（）{
var circle=new google.maps.circle({
fillColor:“#efefef”，
填充不透明度：0.5，
strokeColor:“#000”，
笔划不透明度：1.0，
冲程重量：2
});
此。设置（'距离'，5）；
这个.bindTo（'bounds'，circle）；
圆圈.bindTo（'center'，this）；
圆圈.bindTo（'map'，this）；
圆。bindTo（'半径'，本）；
这是addSizer(（）；
}
RadiusWidget.prototype=new google.maps.MVCObject（）；
RadiusWidget.prototype.distance_changed=函数（）{
this.set（'radius'，this.get（'distance'）*1000）；
};
RadiusWidget.prototype.addSizer=函数（）{
var sizer=new google.maps.Marker({
真的，
标题：“拖动以扩展搜索区域”，
图标：“images/mapicon2.png”
});
sizer.bindTo（'map'，this）；
bindTo（'position'，this，'sizer_position'）；
var me=这个；
google.maps.event.addListener（sizer'drag'，function（）{
me.setDistance（）；
});
};
RadiusWidget.prototype.center_changed=函数（）{
var bounds=this.get（'bounds'）；
如果（边界）{
var lng=bounds.getNorthEast（）.lng（）；
var position=new google.maps.LatLng（this.get（'center'）.lat（），lng）；
此.set（'sizer_position'，position）；
}
};
RadiusWidget.prototype.distanceBetweenPoints=函数（p1，p2）{
如果（！p1 | |！p2）{
返回0；
}
var R=6371；
var dLat=（p2.lat（）-p1.lat（））*Math.PI/180；
var dLon=（p2.lng（）-p1.lng（））*Math.PI/180；
变量a=Math.sin（dLat/2）*Math.sin（dLat/2）+
Math.cos（p1.lat（）*Math.PI/180）*Math.cos（p2.lat（）*Math.PI/180）*
数学单（dLon/2）*数学单（dLon/2）；
var c=2*Math.atan2（Math.sqrt（a），Math.sqrt（1-a））；
var d=R*c；
返回d；
};
RadiusWidget.prototype.setDistance=函数（）{
var pos=this.get（'sizer_position'）；
var center=this.get（'center'）；
var距离=点之间的距离（中心，位置）；
变量距离=数学圆（距离*100）/100
这个。设置（'距离'，距离）；
};
函数init（）{
var mapDiv=document.getElementById（'map-canvas'）；
var map=new google.maps.map（mapDiv{
中心：新的google.maps.LatLng（地理纬度（），地理经度（）），缩放：11，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var distanceWidget=新的distanceWidget（map）；
google.maps.event.addListener（distanceWidget'distance_changed'，function（）{
显示信息（距离小部件）；
});
google.maps.event.addListener（distanceWidget'position_changed'，function（）{
显示信息（距离小部件）；
});
mapDiv.style.width=（视口宽度）+“px”；
mapDiv.style.height=（视口高度）+“px”；
}
函数displayInfo（小部件）{
var info=document.getElementById（'info'）；
info.innerHTML=''；
}
google.maps.event.addDomListener（窗口'load'，init）；

这很好，但我不知道如何添加地理编码，这样就可以输入地名（通过表单发布），使用谷歌地图API进行地理编码，并将其设置为上述脚本的中心点，而不会破坏当前的功能

根据请求，上面有一个JSFIDLE。您将看到，用户可以将标记拖动到输出位置、距离和边界；然而，我想补充的是在表单中输入位置的能力，在提交时对其进行地理编码，并使用生成的坐标重新定位中心标记

---

非常感谢您的帮助。

如果您将DistanceWidget中的标记改为实例变量，并在该标记上创建一个setPosition（）方法，我认为您应该能够做您想要的事情

function DistanceWidget(map) {
    this.set('map', map);
    this.set('position', map.getCenter());

    this.marker = new google.maps.Marker({
        draggable: true,
        title: 'Drag to set centre',
        icon: 'images/mapicon3.png'
    });
    this.marker.bindTo('map', this);
    this.marker.bindTo('position', this);

    var radiusWidget = new RadiusWidget();
    radiusWidget.bindTo('map', this);
    radiusWidget.bindTo('center', this, 'position');
    this.bindTo('distance', radiusWidget);
    this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
/* Add the `setMarkerPosition` method to this class */
DistanceWidget.prototype.setMarkerPosition = function(position) {
    this.marker.setPosition(position);
}

您的init（）-函数变成

function init() {
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(geoip_latitude(), geoip_longitude()), zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var distanceWidget = new DistanceWidget(map);

    /* Set up geo-functionality */
    var geo = new google.maps.Geocoder();
    geo.geocode({address: 'Piccadilly Circus, London'}, function(results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            distanceWidget.setMarkerPosition(results[0].geometry.location);
            map.setCenter(results[0].geometry.location);
        }
    });
    ...

免责声明：这只是我的想法，没有经过测试，而且我从未使用过这些类。

以下是测试方法，并键入zipcode（30084）进行测试：

以下是HTML的初始标记：

    <div id="map-canvas"></div>
    <div id="info">
    </div>
    <div id='geocode'>
         <input name="q" type="text" id="q" /><br />
         <input type="submit" value="Submit" id="geosubmit" />
    </div>

更新。请检查JSFIDLE演示并键入zipcode（30084）进行测试：

要设置您当前的RadiusWidget和google地图标记，这里是修改后的代码。您不需要修改当前小部件的原型以使事情复杂化。您只需调用MVCObject的set选项，并使用实例化的distancewidget访问地图：

geocoder.geocode({
    address: myGeoInfo.value
}, function(responses) {
    if (responses && responses.length > 0) {
        var newMarkerPos = new google.maps.LatLng(responses[0].geometry.location.lat(), responses[0].geometry.location.lng());
        distanceWidget.set('position', newMarkerPos); //sets the new position of marker
        distanceWidget.map.setCenter(newMarkerPos); //sets map's center
    } else {
        //response failed output error message
        alert('error getting geocode');
    }
});

---

有一个教程演示了如何使用Google Maps v3和Jquery进行地理编码和反向地理编码

要添加地理编码，您只需知道从何处获取输入，让它成为zipcode、address或latlng，以及如何将回调数据放入地图。如果你能缩小你的问题范围，这会有帮助。对不起，如果我不清楚的话-我目前根据'init'函数中的IP地址（geoip_latitude（）&geoip_latitude（））设置中心点：function init（）{var mapDiv=document.getElementById（'map-canvas'）；var map=new google.maps.map（mapDiv，{center:new google.maps.LatLng（geoip_latitude（），geoip_longitude（）），zoom:11，mapTypeId:google.maps.mapTypeId.ROADMAP}）；-我想做的是允许输入一个地址，进行地理编码，并将其设置为中心点。@Gmapper您可以使用谷歌地图的地理编码服务来实现这一点。只需向他们提供一个地址，它就会告诉您搜索的时间。这是您正在寻找的吗？@Gmapper我建议用您目前拥有的或一些内容标记一个JSFIDLE一个原型的东西，然后我可以帮助你集成地理代码服务好的，谢谢。我会创建一个原型并粘贴链接到这里。。。

geocoder.geocode({
    address: myGeoInfo.value
}, function(responses) {
    if (responses && responses.length > 0) {
        var newMarkerPos = new google.maps.LatLng(responses[0].geometry.location.lat(), responses[0].geometry.location.lng());
        distanceWidget.set('position', newMarkerPos); //sets the new position of marker
        distanceWidget.map.setCenter(newMarkerPos); //sets map's center
    } else {
        //response failed output error message
        alert('error getting geocode');
    }
});