[英]google maps - reverse geocoding
我对JavaScript的了解不多,对Google Maps不太了解,因此在这里有些挣扎,但是我在地图上画了一个圆。 我还有一个滑块,可让您增加圆半径。
当有人移动标记时,我的圆也随之移动,并且表单中适当的隐藏输入也会更新,这样我就可以获取latLng并将其保存到daabase。
但是,当用户移动标记时,我也想获得一个可读的地址,因此我将地理编码反向。 这是我遇到的问题,可以反向地理编码,但是现在我不能再移动标记了。 我知道这可能很简单,但我什至不知道我的进展如何,更不用说出什么问题了。 谁能帮我吗?
我的地图在http://www.liquidlizard.net/users/trainer
这是我正在使用的代码的转储:
编辑-和要求的代码
<?php
echo $this->Html->script('https://maps.googleapis.com/maps/api/js?sensor=false', array('inline' => false));
?>
<div class="alignCenter bottomBorder marginBot36">
<div class="widthContainer padBot18 padTopt18">
<?php echo $this->Html->image('icon-round-marker-pink.png', array('class'=>'midAlignImg'));?>
</div>
<div class="widthContainer fontTwentySeven padBot18">
Which locations do you cover?
</div>
<div class="singleColForm alignLeft fontFourteen" style="border:none">
<div class="left"><?php echo $this->Html->image('mileradius.png');?></div>
<div class="right" id="sliderHolder">
<div id="slider"></div>
</div>
<div style="clear:both;height:18px"></div>
<div id="map-canvas"></div>
<div id="map-numOf-miles" class="alignCenter fontPurple fontNineteen">0 Miles</div>
</div>
<div class="addButton strong">ADD</div>
</div>
<?php // hidden inputs for locations
echo $this->Form->hidden('miles', array('id'=>'miles'));
echo $this->Form->hidden('location', array('id'=>'location'));
?>
<script type="text/javascript">
$(document).ready(function() {
//User clicks to add location
$(".addButton").click(function() {
$.post( "<?php echo $this->webroot;?>locations/add", { name: "John", time: "2pm" })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
});
//Google Maps
var userLocation = "London";
var geocoder = new google.maps.Geocoder();
var circle;
var latLng;
var marker;
$( "#slider" ).slider({
slide: function(event, ui) {
$("#map-numOf-miles").html(ui.value+' Miles');
$("#miles").val(ui.value);
circle.setRadius(ui.value/0.0621371192*100);
}
});
//Google Maps
function initialize() {
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
}
];
geocoder.geocode( {"address": userLocation}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latLng = results[0].geometry.location;
//alert (latLng);
var mapOptions = {
center: latLng,
zoom: 6,
styles: styles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
marker = new google.maps.Marker({
map: map,
position: latLng,
draggable: true
});
circle = new google.maps.Circle({
map: map,
radius: 0, //your radius in meters
strokeColor: '#d12d87',
strokeOpacity: 0.35,
strokeWeight: 2,
fillColor: '#d12d87',
fillOpacity: 0.35,
center: latLng
});
$("#location").val(results[0].geometry.location);
google.maps.event.addListener(marker, "dragend", function(){
var position = marker.getPosition();
map.setCenter(position);
//update the hidden form with the new location
$("#location").val(position.lat() + " ," + position.lng());
//reverse geocode the latlng to get human readable address
var latlng = new google.maps.LatLng(position.lat(), position.lng());
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
alert(results[1].formatted_address);
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
});
google.maps.event.addListener(marker, "drag", function(){
circle.setCenter(marker.getPosition());
});
} else {
alert("Geocode failed. Please edit your address (top of the page) and try again.");
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
});
</script>
Emil是正确的,没有定义infowindow,因此进一步执行被暂停。
您需要添加以下内容,该内容取自https://developers.google.com/maps/documentation/javascript/geocoding#ReverseGeocoding
var infowindow = new google.maps.InfoWindow();
后
var geocoder = new google.maps.Geocoder();
您在这里有一个小问题:
infowindow.setContent(results[1].formatted_address);
没有定义infowindow,因此将来的javascript将失败。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.