【发布时间】：2011-03-17 15:07:29
【问题描述】：
您的帮助将不胜感激。我正在使用下面的 JS 代码显示带有可调整大小的圆形叠加层的 Google 地图，以输出中心点坐标、半径和边界框：
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);
这很好用，但我不知道如何向其中添加地理编码，以便可以输入地名（通过表单发布），使用 Google Maps API 进行地理编码并设置为中心点上面的脚本，而不破坏当前的功能。
根据要求，上述here 有一个jsFiddle。您将看到用户可以拖动标记来输出位置、距离和边界；但是，我要添加的是在表单中输入位置的能力，该位置在提交时进行了地理编码，生成的坐标用于重新定位中心标记。
非常感谢任何帮助，谢谢。
【问题讨论】：
-
要添加地理编码，您只需要知道从哪里获取输入，让它是邮政编码或地址或纬度，以及您希望如何将回调数据放入地图中。如果您缩小问题范围会有所帮助。
-
对不起，如果我不清楚 - 我目前在“init”函数中根据 IP 地址（geoip_latitude() & geoip_longitude()）设置中心点：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.地图.MapTypeId.ROADMAP}); - 我想做的也是允许输入地址、地理编码并设置为中心点。
-
@Gmapper 你可以使用谷歌地图的地理编码服务来实现这一点。只要给他们一个地址，它就会告诉你你搜索的纬度。这是你要找的吗？
-
@Gmapper 我建议用你目前拥有的东西或原型的东西标记一个 jsfiddle，然后我可以帮助你集成地理编码服务
-
好的，谢谢。我将创建一个原型并将链接粘贴到此处...
标签： javascript google-maps google-maps-api-3 google-geocoder