我想要谷歌地图的地方更改与第一个选定的国家和,下一个选定的城市相同的国家(普通国家)和最后键入的地区名称。我该怎么办?
//////// Loading Google Map //////
$(function() {
var latitude = $('input[name="latitude"]').val();
var longitude = $('input[name="longitude"]').val();
var lat = (latitude ? latitude : 38.341656192795924),
lng = (longitude ? longitude : -122.68604278564453),
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: (latitude ? 16 : 7),
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: false,
streetViewControl: false,
overviewMapControl: true,
rotateControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image,
draggable: true,
animation: google.maps.Animation.DROP
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(marker, 'dragend', function(event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
$("#searchTextField").val('');
});
google.maps.event.addListener(map, 'click', function(event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng": event.latLng
}, function(results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("#searchTextField").val(results[0].formatted_address);
}
});
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&sensor=true"></script>
<form>
Country:
<select class="Country">
<option value="" selected="selected"></option>
<option value="United States">United States</option>
<!--<option value="Canada">Canada</option>-->
<!-- OR etc... -->
</select>
Cities:
<select class="Cities">
<option value="" selected="selected"></option>
<option value="New York">New York</option>
<!--<option value="Los Angeles">Los Angeles</option>-->
<!--<option value="Chicago">Chicago</option>-->
<!-- OR etc... -->
</select>
District:
<input type="text" id=SearchDistrict">
</form>
<p>
<div id="map_canvas" style="height: 400px;width: 500px;"></div>
DEMO: http://jsfiddle.net/qze4L0aq/
例如:(以下示例用Photoshop来澄清。)
第一次:我选择了国家/地区United States
谷歌地图更改地址为:
第二:我选择了城市New York
谷歌地图的地方变化如下:
第三:我选择了区Flatiron
谷歌地图的地方变更如下:
答案 0 :(得分:1)
使用Google地图geocoder搜索地点。
我为选择和输入添加了一个更改事件处理程序,并使用地理编码器搜索位置。它必须经过精炼,但它是一个起点。
//////// Loading Google Map //////
$(function() {
var latitude = $('input[name="latitude"]').val();
var longitude = $('input[name="longitude"]').val();
var lat = (latitude ? latitude : 38.341656192795924),
lng = (longitude ? longitude : -122.68604278564453),
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: (latitude ? 16 : 7),
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: false,
streetViewControl: false,
overviewMapControl: true,
rotateControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image,
draggable: true,
animation: google.maps.Animation.DROP
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(marker, 'dragend', function(event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
$("#searchTextField").val('');
});
google.maps.event.addListener(map, 'click', function(event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng": event.latLng
}, function(results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("#searchTextField").val(results[0].formatted_address);
}
});
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
}
$('select,input').change(function() {
var searchString = [$('select.Country').val(), $('select.Cities').val(), $('input#SearchDistrict').val()].join(', ');
alert(searchString);
search(searchString);
});
var geocoder = new google.maps.Geocoder();
function search(address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&sensor=true"></script>
<form>
Country:
<select class="Country">
<option value="" selected="selected"></option>
<option value="United States">United States</option>
<!--<option value="Canada">Canada</option>-->
<!-- OR etc... -->
</select>
Cities:
<select class="Cities">
<option value="" selected="selected"></option>
<option value="New York">New York</option>
<!--<option value="Los Angeles">Los Angeles</option>-->
<!--<option value="Chicago">Chicago</option>-->
<!-- OR etc... -->
</select>
District:
<input type="text" id="SearchDistrict"/>
</form>
<p>
<div id="map_canvas" style="height: 400px;width: 500px;"></div>