我使用该程序的主要目标是生成一个显示特定建筑物位置的谷歌地图。
由于谷歌的限制原因,我已经为我在 MS SQL 数据库(它是一个房地产网站)中分析的所有建筑物生成并存储了所有纬度和经度。每次选择一栋建筑物时,我都会检索其相应的纬度和经度并将其存储在两个 asp:Label 中。我在 Javascript 中使用脚本来处理通过两个 asp:Label 传递的纬度和经度。我的问题是,由于某种原因,LatLng 函数似乎不起作用,我的地图没有显示它们应该显示的坐标。我想我可能对 LatLng 期望的变量类型有疑问。我已经尝试过传递的默认字符串并将变量转换为真实类型。这是脚本。任何帮助或建议表示赞赏:
<script type="text/javascript">
(function () {
// Defining global variables
var map, geocoder, marker, infowindow, propertyaddress, selectedbuilding, maplatitude, maplongitude, buildinglatlng, latlng, myOptions;
function InitializeMap() {
//propertyaddress = '400 Alton Road, Miami Beach, FL 33139';
propertyaddress = document.getElementById('<%=lblselectedHiddenBuildingAddress.ClientID%>').innerText;
selectedbuilding = document.getElementById('<%=lblMainBuilding.ClientID%>').innerText;
//maplatitude = parseFloat(document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText);
//maplongitude = parseFloat(document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText);
maplatitude = document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText;
maplongitude = document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText;
buildinglatlng = new google.maps.LatLng(maplatitude, maplongitude);
//window.alert("Processed propertyaddress");
//latlng = new google.maps.LatLng(25.76804, -80.132743);
// Creating an object literal containing the properties
// we want to pass to the map
myOptions = {
zoom: 15,
center: new google.maps.LatLng(maplatitude, maplongitude),
//center: buildinglatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
streetViewControl: true,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE
]
},
navigationControl: true,
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
};
// Creating the map
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
window.onload = InitializeMap;
})();
</script>
#
添加了有效但使用地理编码器的代码
#例如,以下代码可以完美运行,但它使用了地理编码器。传递变量不是问题。LatLng 以及它对传递的变量的作用有些奇怪。不过,它确实获得了所有重要位置的值。
<script type="text/javascript">
(function () {
// Defining global variables
var map, geocoder, marker, infowindow, propertyaddress, selectedbuilding, maplatitude, maplongitude, buildinglatlng, latlng, myOptions;
function InitializeMap() {
//propertyaddress = '400 Alton Road, Miami Beach, FL 33139';
propertyaddress = document.getElementById('<%=lblselectedHiddenBuildingAddress.ClientID%>').innerText;
selectedbuilding = document.getElementById('<%=lblMainBuilding.ClientID%>').innerText;
//maplatitude = parseFloat(document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText);
//maplongitude = parseFloat(document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText);
maplatitude = document.getElementById('<%=lblCoordinateLatitud.ClientID%>').innerText;
maplongitude = document.getElementById('<%=lblCoordinateLongitud.ClientID%>').innerText;
buildinglatlng = new google.maps.LatLng(maplatitude, maplongitude);
//window.alert("Processed propertyaddress");
//latlng = new google.maps.LatLng(25.76804, -80.132743);
if (!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: propertyaddress
}
geocoder.geocode(geocoderRequest, function (results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
//map.setCenter(results[0].geometry.location);
// Creating an object literal containing the properties
// we want to pass to the map
myOptions = {
zoom: 15,
//center: new google.maps.LatLng(maplatitude, maplongitude),
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
streetViewControl: true,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE
]
},
navigationControl: true,
navigationControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
};
// Creating the map
map = new google.maps.Map(document.getElementById("map"), myOptions);
// Check to see if we've already got a Marker object
if (!marker) {
// Creating a new marker and adding it to the map
marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
// Setting the position of the marker to the returned location
marker.setPosition(results[0].geometry.location);
// Check to see if we've already got an InfoWindow object
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
// Creating a new InfoWindow
infowindow = new google.maps.InfoWindow();
}
// Creating the content of the InfoWindow to the address
// and the returned position
var content = '<h2>' + selectedbuilding + '</h2>';
//content += 'Lat: ' + results[0].geometry.location.lat() + '<br />';
//content += 'Lng: ' + results[0].geometry.location.lng();
// Adding the content to the InfoWindow
infowindow.setContent(content);
// Opening the InfoWindow
infowindow.open(map, marker);
});
// Triggering the click event
google.maps.event.trigger(marker, 'click');
};
});
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
window.onload = InitializeMap;
})();
</script>
问候, 埃利亚斯