我对相关程序的主要目标是生成一个显示特定建筑物位置的Google地图。
由于Google限制原因,我已经为我在MS SQL数据库(它是一个房地产网站)中分析的所有建筑物生成并存储了所有纬度和经度。每当选择一个建筑物时,我会检索其相应的纬度和经度并将其存储在两个asp:Label中。我在Javascript中使用脚本来处理通过两个asp:Label's传递的纬度和纵向。我的问题是,由于某种原因,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>
此致 利亚
答案 0 :(得分:0)
您是否确认maplatitude
和maplongitude
包含您期望的值(例如,使用调试器)?
预期位置与地图上显示的实际位置之间是否存在任何关联(例如,如果建筑物位于N21.7684,标记位于N21.0000,小数位可能已丢失)
答案 1 :(得分:0)
我刚从Google发现了一条帖子,他们更改了LatLng功能,现在您必须使用NUMBER()来填充这两个参数。他们声称人们将字符串传递给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(Number(maplatitude), Number(maplongitude));
//window.alert("Processed propertyaddress");
myOptions = {
zoom: 15,
center: new google.maps.LatLng(Number(maplatitude), Number(maplongitude)),
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(buildinglatlng);
// 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>';
// 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>