我有两个脚本。当状态/县下拉时更改它将激活它将进行地址查找并转到该特定县。第二个脚本我在表单中填充了经度和纬度文本框。我想把两者结合起来。后一个脚本使用静态经度/纬度,我需要它使用像我在第一个脚本中使用的地址。在尝试将两者结合起来时,我的代码中出现了错误。地图甚至不会出现。
function selectState(state_id){
if(state_id!="-1"){
loadData('city',state_id);
var e = document.getElementById("state");
var stateloc = e.options[e.selectedIndex].value;
var sAddress = state_id + stateloc;
var $latitude = document.getElementById('latitude');
var $longitude = document.getElementById('longitude');
//var latitude = 33.00636021320537
// var longitude = -93.46687316894531;
var zoom = 12;
var geocoder;
//var LatLng = new google.maps.LatLng(latitude, longitude);
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': sAddress}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var mapOptions = {
zoom: zoom,
//center: LatLng,
panControl: false,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var marker = new google.maps.Marker({
// position: LatLng,
position: results[0].geometry.location,
map: map,
title: 'Drag Me!',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(marker){
var latLng = marker.latLng;
$latitude.value = latLng.lat();
$longitude.value = latLng.lng();
});
//end geocoder check
}
else
{
alert("Geocode was not successful: " + status);
}
});
}else{
$("#city_dropdown").html("<option value='-1'>Select city</option>");
}
}
HTML
<li>
<label for="lat">Latitude:</label>
<input id="latitude" placeholder="latitude" name="lat" type="text" class="text" />
</li>
<li>
<label for="lon">Longitude:</label>
<input id="longitude" placeholder="longitude" name="lon" class="text" type="text"/>
</li>
<div id="map" style="width: 460px; height: 350px;"></div>
答案 0 :(得分:0)
您设置了未定义地图的中心。因此,如果其他一切都没问题,你必须改变这一部分:
...
if (status == google.maps.GeocoderStatus.OK) {
// map is undefined here
// map.setCenter(results[0].geometry.location);
var mapOptions = {
zoom: zoom,
// center could be set here
center: results[0].geometry.location,
panControl: false,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// map is created here
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
...