C# 显示谷歌地图方向详细信息时滚动div问题
我有一个谷歌地图,上面有一个标记,它是起始地址,还有一个文本输入,它接受目标地址。单击GetDirections按钮时,我在一个div中获取方向信息。代码如下: asp.net:C# 显示谷歌地图方向详细信息时滚动div问题,c#,javascript,asp.net,google-maps,C#,Javascript,Asp.net,Google Maps,我有一个谷歌地图,上面有一个标记,它是起始地址,还有一个文本输入,它接受目标地址。单击GetDirections按钮时,我在一个div中获取方向信息。代码如下: asp.net: 输入地址以获取方向: javascript代码: var lat = '<%=m_lat %>', long = '<%=m_long %>'; var myCenter = new google.maps.LatLng(lat, long); var directionsDisplay =
输入地址以获取方向:
javascript代码:
var lat = '<%=m_lat %>', long = '<%=m_long %>';
var myCenter = new google.maps.LatLng(lat, long);
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
function initialize() {
var mapProp = {
zoom: 7,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true,
center: myCenter,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map-container"), mapProp);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'latLng': myCenter }, function (results, status) {
if (results != null) {
result = results[0];
if (result != null) {
var strFullAddress = '<%=m_Address %>';
document.getElementById('hdnUserAddress').value = strFullAddress;
}
}
var marker = new google.maps.Marker({
position: myCenter,
title: "latlng: " + myCenter + " You are in" + document.getElementById('hdnUserAddress').value
});
marker.setMap(map);
infowindow = new google.maps.InfoWindow({ content: "<b>Address</b><br/>" + document.getElementById('hdnUserAddress').value });
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
});
directionsDisplay.setPanel(document.getElementById('directions-panel'));
directionsDisplay.setMap(map);
}
function reducemap() {
document.getElementById("map-container").style.width = "320px";
document.getElementById("directions-panel").style.width = "280px";
document.getElementById("directions-panel").style.visibility = 'visible';
}
function calcRoute() {
var start = '<%=m_Address %>';
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
var lat='',long='';
var myCenter=new google.maps.LatLng(lat,long);
var directionsDisplay=new google.maps.DirectionsRenderer();
var directionsService=new google.maps.directionsService();
函数初始化(){
var mapProp={
缩放:7,
泛控制:对,
动物控制:对,
ZoomControl选项:{
样式:google.maps.ZoomControlStyle.LARGE
},
mapTypeControl:true,
scaleControl:对,
街景控制:对,
overviewMapControl:true,
旋转控制:对,
中心:迈森特,
mapTypeId:google.maps.mapTypeId.HYBRID
};
var map=new google.maps.map(document.getElementById(“地图容器”),mapProp);
var geocoder=new google.maps.geocoder();
geocoder.geocode({'latLng':myCenter},函数(结果,状态){
如果(结果!=null){
结果=结果[0];
如果(结果!=null){
var strFullAddress='';
document.getElementById('hdnUserAddress')。value=strFullAddress;
}
}
var marker=new google.maps.marker({
职位:迈森特,
标题:“latlng:“+myCenter+”您在“+document.getElementById('hdnUserAddress').value”中
});
marker.setMap(map);
infowindow=new google.maps.infowindow({content:“Address
“+document.getElementById('hdnUserAddress').value});
google.maps.event.addListener(标记,'click',函数(){
信息窗口。打开(地图、标记);
});
});
directions display.setPanel(document.getElementById('directions-panel');
方向显示.setMap(地图);
}
函数reducemap(){
document.getElementById(“映射容器”).style.width=“320px”;
document.getElementById(“方向面板”).style.width=“280px”;
document.getElementById(“方向面板”).style.visibility='visible';
}
函数calcRoute(){
var start='';
var end=document.getElementById('end').value;
var请求={
来源:start,
目的地:完,
travelMode:google.maps.travelMode.DRIVING
};
路由(请求、功能(响应、状态){
if(status==google.maps.directionstatus.OK){
方向显示。设置方向(响应);
}
});
}
google.maps.event.addDomListener(窗口“加载”,初始化);
问题是:当显示方向时,google map会在方向面板div中用左右箭头显示方向,当我尝试滚动div时,箭头不会固定,它们也会不断移动。我希望在滚动时箭头无论在哪里都会固定。有人能帮我解决这个问题吗?在加载google map的google api脚本后,我在页面的样式标签中添加了以下内容,我的浏览器问题得到了解决:
/* Override Google Maps Icon style */
.adp-substep .adp-stepicon .adp-maneuver {
position: static;
}
/* Override Google Maps Icon Container style */
.adp-substep .adp-stepicon{
position: static; }
/* Override Google Maps Icon style */
.adp-substep .adp-stepicon .adp-maneuver {
position: static;
}
/* Override Google Maps Icon Container style */
.adp-substep .adp-stepicon{
position: static; }