Flask接口签名sign原理与实例代码浅析
245
2023-07-10
Google 地图控件集详解及实例代码
Google 地图控onjXN件集
Google 地图 - 默认控件集设置:
当使用一个标准的google地图,它的默认设置如下:
1.Zoom-显示一个滑动条来控制map的Zoom级别
2.PPan-地图上显示的是一个平底碗样的控件,点击4个角平移地图
3.MapType-允许用户在map types(roadmap 和 satallite)之间切换
4.StreetView-显示为一个街景小人图标,可拖拽到地图上某个点来打开街景
Google 地图 - 更多控件集
除了以上默认控件集,Google还有:
.Scale-显示地图比例尺
.Rotate-显示一个小的圆周图标,可以转动地图
.verview Map-从一个广域的视角俯视地图
创建地图时你可以通过设置选项指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项。
Google 地图 - 关闭默认控件集
你可能希望能够关闭默认的控件集。
为了关闭默认控件集,设置地图的disableDefaultUI的属性为true:
实例
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
Google 地图 - 开所有控件集
一些控件集默认显示在地图上,而其它的不会,除非你设置它们。
设置控件为true使其可见-设置控件为false则隐藏它。
以下实例开启所有的控件:
实例
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
Google 地图 - 修改控件集
某些地图控件是可配置的。通过制定控件选项域改变控件集。
F举个例子来说,修改Zoom 控件的选项在zoomControlOptions指定。zoomControlOptions包含如下3种选项:
1.google.maps.ZoomControlStyle.SMALL-显示最小化zoom 控件
2.google.maps.ZoomControlStyle.LARGE-显示标准zoom滑动控件
3.google.maps.ZoomControlStyle.DEFAULT-基于设备和地图大小,选择最合适的控件
实例
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
注意: 如果需要修改一个控件,首先开启控件(设置其为true)。
另一个控件为 MapType 控件。
MapType 控件可显示为以下 style 选项之一:
1.google.maps.MapTypeControlStyle.HORIZONTAL_BAR,用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。
2.google.maps.MapTypeControlStyle.DROPDOWN_MENU,用于显示单个按钮控件,以便您从下拉菜单中选择地图类型。
3.google.maps.MapTypeControlStyle.DEFAULT,用于显示"默认"的行为,该行为取决于屏幕尺寸,并且可能会在 API 以后的版本中有所变化。
实例
http://function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
同样你可以使用ControlPosition属性指定控件的位置:
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
Google 地图 - 自定义控件集
创建一个返回伦敦自定义控件,用于点击事件: (如果地图被拖拽):
实例
var map;
var london = new google.maps.LatLng(51.508742,-0.120850);
// Add a Home control that returns the user to London
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Home'
controlUI.appendChild(controlText);
// Setup click-event listener: simply set the map to London
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(london)
});
}
function initialize() {
var mapDiv = document.getElementById('googleMap');
var myOptions = {
zoom: 12,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create a DIV to hold the control and call HomeControl()
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
// homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
以上就是Google 地图控件集的资料整理,后续继续补充相关知识,希望能帮助开发Google 地图应用的朋友,谢谢大家对本站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~