html5指南-7.geolocation结合google maps开发一个小的应用
下面请跟着图老师小编一起来了解下html5指南-7.geolocation结合google maps开发一个小的应用，精心挑选的内容希望大家喜欢，不要忘记点个赞哦！
今天我们将把html5的geolocation结合google maps开发一个小的应用。google maps的api地址：/maps/documentation/javascript/?hl=zh-CN。 调用google maps，实现需要添加js引用script type=&text/javascript& src=&/maps/api/js?sensor=false&/script，其中sensor参数的具体含义： 要使用 Google Maps API，您需要指明自己的应用程序在任何 Maps API 库或服务请求中是否是使用传感器（如 GPS 定位器）来确定用户所处位置的。这对移动设备尤为重要。如果您的 Google Maps API 应用程序使用任何形式的传感器确定访问您的应用程序的设备的位置，那么您必须通过将 sensor 参数值设置为 true 以声明这一点。 html部分比较简单，只需要准备一个div就可： 代码如下： body div id="map" /div /body js代码的框架如下： 代码如下： script type="text/javascript"
var browserSupport = var attempts = 0; $(document).ready(function () { //初始化地图 　　　　InitMap(); //定位 getLocation(); 　　　　//定位跟踪 watchLocation(); }); function InitMap() { /* Set all of the options for the map */ var options = { }; /* Create a new Map for the application */ map = new google.maps.Map($('#map')[0], options); } /* * If the W3C Geolocation object is available then get the current * location, otherwise report the problem */ function getLocation() { } function watchLocation() { } /* Plot the location on the map and zoom to it */ function plotLocation(position) { } /* Report any errors using this function */ function reportProblem(e) { } /script InitMap方法就是调用google maps api初始化地图，他需要设置options对象，在调用地图初始化的时候使用。 代码如下： function InitMap() { /* Set all of the options for the map */ var options = { zoom: 4, center: new google.maps.LatLng(38.6201, -90.2003), mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.BOTTOM_CENTER }, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.LEFT_CENTER }, scaleControl: true, scaleControlOptions: { position: google.maps.ControlPosition.BOTTOM_LEFT }, streetViewControl: true, streetViewControlOptions: { position: google.maps.ControlPosition.LEFT_TOP } }; /* Create a new Map for the application */ map = new google.maps.Map($('#map')[0], options); } getLocation和watchLocation方法获取定位信息。 代码如下： function getLocation() { /* Check if the browser supports the W3C Geolocation API */ if (navigator.geolocation) { browserSupport = navigator.geolocation.getCurrentPosition(plotLocation, reportProblem, { timeout: 45000 }); } else { reportProblem(); } } function watchLocation() { /* Check if the browser supports the W3C Geolocation API */ if (navigator.geolocation) { browserSupport = navigator.geolocation.watchPosition(plotLocation, reportProblem, { timeout: 45000 }); } else { reportProblem(); } } 成功获取位置信息后，调用plotLocation方法把位置显示在google maps上。 代码如下： function plotLocation(position) { attempts = 0; var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({ position: point }); marker.setMap(map); map.setCenter(point); map.setZoom(15); } demo下载地址：googleMapGeolocation.rar
来源:/n/0380.html
热门搜索：
PS教程 使用液化进行人物效正
天正CAD基础教程 怎么绘制墙体
如何在WPS文字里给图片加入题注
如何把帅哥图片后期处理成炫彩效果
您可能会发现，经常看到在短视频有人在表演的时候说一些鼓励的话，然后就是双击666，听的您或许摸不清头脑，我就在这里为您解答一下，请给我点赞，让我解答更加有动力。
您是否熟悉我们生活的城市是怎么命名而来的呢？中国城市的命名可是有很深的文化底蕴和历史背景的,你都知道么?我从网上搜集了大量的城市名来源，让您好好的涨涨知识，您准备好了吗？
对于爱美人士来说，美白护肤是不分季节的，即使在冬季，依然需要做好皮肤护理工作。饮食调理是护肤的一项重要措施，那么冬天美白吃什么水果呢?接下来就和我一起来看看了解一下冬季美白吃什么水果好！
产妇顺产以后多久可以洗头发？有很多产妇为了防止自己受寒所以在产后不让自己洗头发，但是又特别难受，这篇文章讲述了产妇顺产以后多长时间可以洗头发，通过这篇文章了解产妇顺产以后多久可以洗头发吧。
阴阳师是现在相当火热的一款手游，最近阴阳师又有了新的更新，玩家可以通过挑战副本来获取妖刀姬樱雨刀舞皮肤。可是的很多人不知道阴阳师妖刀姬副本阵容是怎样的，下面就给大家来详细介绍吧。
阴阳师是现在很火热的一款手机游戏，这款游戏一直在更新完善，受到很多人的追捧，就在最近阴阳师又推出了小鹿男，小鹿男作为SSR式神，很多人对它还不是很了解，下面就给大家来介绍阴阳师小鹿男御魂以及阵容搭配吧。
我们在玩阴阳师完成悬赏任务的时候，都会要求玩家找到各种式神的位置，可是很多人不知道阴阳师跳跳哥哥在哪里刷、哪里多，下面就给大家来详细介绍吧，希望对大家玩游戏有所帮助。
京津冀及周边地区出现持续雾霾天气，很是让孕妈妈们担心。持续的雾霾天气对孕妇产生了很大的影响，那么雾霾天气对孕妇危害有多大？雾霾天气孕妇怎么办？下面的文章详细介绍 了雾霾天气对孕妇的危害，一起来看看吧。
我们知道宝宝刚刚出生的时候口腔里是没有牙齿的，一般孩子在四个月以后慢慢开始出牙，每个孩子的体质不一样，所以出牙的时间也是有所差异的，宝宝出牙的时候身体会出现一些症状，家长们要及时的护理好，下面一起来看看宝宝长牙的症状有哪些。
肚子上的赘肉看上去让人烦恼，尤其是对于想穿裙子的女生来说更是一件郁闷的事情。现在减肥的方法有很多，但是很多人并不知道专门瘦肚子的方法。那么，如何瘦肚子呢？下面就给大家介绍几种减肚子的方法吧。action control scale
行动控制量表
语文的功能 - 豆丁网
、并不被其他潜在分心物影响 之能力。主要内容是根据Kuhl()的观点和所编的 「行动控制量表(Action Control Scale, ACS)的六种控制 能力来设计量表题目： ?主动的注意选择 ?编码控制 ?情绪控制 ?动机控制 ?环境控制
基于1个网页-
The map can be moved with a left-click, drag mouse action, and the scale can be changed with the zoom control in the upper left corner of the map.
通过左键单击、拖动鼠标动作可以移动地图，通过地图左上角的缩放控件能够改变地图的比例。
In case of the ULW scale the control action of these forcings can not be ignored and, consequently, the dynamic characteristics of the ULW differ significantly from those of long waves.
在超长波尺度时强迫作用起着不可忽略的控制作用，以至于超长波的动力特性与长波有很大差异。
$firstVoiceSent
- 来自原声例句
请问您想要如何调整此模块？
感谢您的反馈，我们会尽快进行适当修改！
请问您想要如何调整此模块？
感谢您的反馈，我们会尽快进行适当修改！> 探索DeepEarth的内置控件
探索DeepEarth的内置控件
　　在DeepEarth内部提供了6个地图扩展控件（CoordControl、ScaleControl、NavControl、MapControl、MouseControl、ZoomSliderControl）为我们提供了相对比较规范、完善的编程模型，通过他们可进一步的增强地图的操作灵活性等，还可通过扩展开发出许多功能强大的扩展程序。本篇主要以DeepEarth内置控件中的最常用的几个控件为主题探索DeepEarth内置控件的使用方法。
　　在探索DeepEarth内置控件的使用方法之前先了解下内置控制的基本结构，DeepEarth定义了MapControl控件基类，CoordControl、ScaleControl、NavControl、MouseControl都是通过继承MapControl扩展而来，如下UML图所示：
　　MapConotrol继承了Silverlight的ContentControl类并实现了DeepEarth的ILayer接口，在整个DeepEarth的扩展开发中提供了基础的编程模型，通过其他源代码可以知道：&
MapControl源代码
&1&&public&class&MapControl&:&ContentControl,&ILayer&2&&&&&{&3&&&&&&&&&///&&summary&&4&&&&&&&&&///&Protected&backing&field&for&the&MapInstance&property&5&&&&&&&&&///&&/summary&&6&&&&&&&&&protected&Map&_M&7&&8&&&&&&&&&#region&ILayer&Members&9&10&&&&&&&&&///&&summary&11&&&&&&&&&///&Access&to&instance&of&the&Map&for&this&layer.<span style="COLOR: #&&&&&&&&&///&&/summary&13&&&&&&&&&public&virtual&Map&MapInstance<span style="COLOR: #&&&&&&&&&{<span style="COLOR: #&&&&&&&&&&&&&get16&&&&&&&&&&&&&{<span style="COLOR: #&&&&&&&&&&&&&&&&&if&(_Map&==&null)<span style="COLOR: #&&&&&&&&&&&&&&&&&{<span style="COLOR: #&&&&&&&&&&&&&&&&&&&&&_Map&=&Map.GetMapInstance(this);<span style="COLOR: #&&&&&&&&&&&&&&&&&}<span style="COLOR: #&22&&&&&&&&&&&&&&&&&return&_M<span style="COLOR: #&&&&&&&&&&&&&}<span style="COLOR: #&&&&&&&&&&&&&set25&&&&&&&&&&&&&{<span style="COLOR: #&&&&&&&&&&&&&&&&&if&(ReferenceEquals(_Map,&value))<span style="COLOR: #&&&&&&&&&&&&&&&&&{<span style="COLOR: #&&&&&&&&&&&&&&&&&&&&&return;<span style="COLOR: #&&&&&&&&&&&&&&&&&}<span style="COLOR: #&31&&&&&&&&&&&&&&&&&_Map&=&<span style="COLOR: #&&&&&&&&&&&&&}<span style="COLOR: #&&&&&&&&&}<span style="COLOR: #&35&&&&&&&&&///&&summary&36&&&&&&&&&///&A&unique&ID&to&idenitify&the&layer<span style="COLOR: #&&&&&&&&&///&&/summary&38&&&&&&&&&public&string&ID&{&get;&set;&}<span style="COLOR: #&40&&&&&&&&&///&&summary&41&&&&&&&&&///&Indicates&whether&the&Layer&is&visible&to&the&user.<span style="COLOR: #&&&&&&&&&///&&/summary&43&&&&&&&&&public&bool&IsVisible&{&get;&set;&}<span style="COLOR: #&45&&&&&&&&&#endregion46&&&&&}<span style="COLOR: #&}
&　　CoordControl在DeepEarth中被定义为呈现地图鼠标锁在坐标系数和当前地图缩放级别的控件，其使用非常简单。
&DeepControls:CoordControl&TextOptions.TextHintingMode=&Fixed&&&/DeepControls:CoordControl&
　　ScaleControl在DeepEarth中被定义为呈现地图显示尺寸比例的控件，使用同CoordControl一样的简单，通常就是设置其他显示在地图控件的位置属性。
&DeepControls:ScaleControl&VerticalAlignment=&Bottom&&HorizontalAlignment=&Right&&Margin=&<span style="COLOR: #,12,12,40&&/&
　　在这几个内置扩展控件中，使用率最高的就是导航控件NavControl，NavControl控件为实现地图导航功能提供了完善的开发模型，只需要简单的配置就可以扩展出不同的功能导航菜单，基本使用方法如下代码块：
&&DeepControls:NavControl&x:Name=&deepNavControl&&RotationOn=&True&/&
　　通过所提供的编程模型可扩展出适合自己需要的任何效果功能导航菜单，比如加上快速导航按钮实现快速定位到指定的城市地图等：
&DeepControls:NavControl&x:Name=&deepNavControl&&RotationOn=&True&&&&&&&StackPanel&Orientation=&Horizontal&&Height=&40&&&&&&&&&&&Button&x:Name=&btnFull&&Click=&btnFull_Click&&Style=&{StaticResource&StandardButton}&&ToolTipService.ToolTip=&全屏显示&&&&&&&&&&&&&&&Image&x:Name=&imgFull&&Source=&../Images/FullScreen.png&&&/Image&&&&&&&&&&/Button&&&&&&&&&&Button&x:Name=&btnRefresh&&Click=&btnRefresh_Click&&Style=&{StaticResource&StandardButton}&&ToolTipService.ToolTip=&刷新地图&&&&&&&&&&&&&&&Image&x:Name=&imgRefresh&&Source=&../Images/Refresh.png&&&/Image&&&&&&&&&&/Button&&&&&&&&&&Button&x:Name=&btnBeiJing&&Click=&btnBeiJing_Click&&Style=&{StaticResource&StandardButton}&&&&&&&&&&&&&&&&&&ToolTipService.ToolTip=&导航到北京&&Content=&北京&/&&&&&&&&&&Button&x:Name=&btnShangHai&&Click=&btnShangHai_Click&&&Style=&{StaticResource&StandardButton}&&&&&&&&&&&&&&&&&&ToolTipService.ToolTip=&导航到上海&&Content=&上海&/&&&&&&/StackPanel&&/DeepControls:NavControl&
&　　　　　　　　
　　如上图示，要实现功能导航菜单项的功能直接针对相应的Button的Click事件编写实现代码既可，比如说我想要实现全屏与非全屏的切换显示，以及实现点击北京后将地图导航定位到北京的地图，那么可如下实现：
private&void&btnFull_Click(object&sender,&RoutedEventArgs&e){&&&&Application.Current.Host.Content.IsFullScreen&=&!Application.Current.Host.Content.IsFullS}private&void&btnBeiJing_Click(object&sender,&RoutedEventArgs&e){&&&&LocationMap(<span style="COLOR: #6.3895,&<span style="COLOR: #.9054,&<span style="COLOR: #);}///&&summary&///&根据经度和纬度定位系统到指定的级别///&&/summary&///&&param&name=&longitude&&&/param&///&&param&name=&latitude&&&/param&///&&param&name=&zoom&&&/param&private&&void&LocationMap(double&longitude,&double&latitude,&double&zoom){&&&&&mapInstance.SetViewCenter(new&Point(longitude,&latitude),&zoom);}
　　除了上面的这种实现方式来扩展导航功能菜单外，我们也可以通过一个Silverlight用户控件来封装导航菜单。实现非常简单，将原始被直接编码在NavControl中的元素移置到用户控件中就OK了，如下自定义的功能导航菜单的Silverlight用户控件代码：
&UserControl&x:Class=&DETraining.Controls.ToolBarControl&&&&&xmlns=&/winfx/2006/xaml/presentation&&&&&&xmlns:x=&/winfx/2006/xaml&&&&&&&Grid&x:Name=&LayoutRoot&&&&&&&&&&&StackPanel&Orientation=&Horizontal&&Height=&40&&&&&&&&&&&&&&&Button&x:Name=&btnFull&&Click=&btnFull_Click&&Style=&{StaticResource&StandardButton}&&ToolTipService.ToolTip=&全屏显示&&&&&&&&&&&&&&&&&&&&Image&x:Name=&full&&Source=&../Images/FullScreen.png&/&&&&&&&&&&&&&&/Button&&&&&&&&&&&&&&Button&x:Name=&btnRefresh&&Click=&btnRefresh_Click&&Style=&{StaticResource&StandardButton}&&ToolTipService.ToolTip=&刷新地图&&&&&&&&&&&&&&&&&&&Image&x:Name=&imgRefresh&&Source=&../Images/Refresh.png&&&/Image&&&&&&&&&&&&&&/Button&&&&&&&&&&&&&&Button&x:Name=&btnBeiJing&&Click=&btnBeiJing_Click&&Style=&{StaticResource&StandardButton}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ToolTipService.ToolTip=&导航到北京&&Content=&北京&/&&&&&&&&&&&&&&Button&x:Name=&btnShangHai&&Click=&btnShangHai_Click&&&Style=&{StaticResource&StandardButton}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ToolTipService.ToolTip=&导航到上海&&Content=&上海&/&&&&&&&&&&&&&&Button&x:Name=&btnWuHan&&Click=&btnWuHan_Click&&&Style=&{StaticResource&StandardButton}&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ToolTipService.ToolTip=&导航到湖北&&Content=&湖北&/&&&&&&&&&&/StackPanel&&&&&&/Grid&&/UserControl&
　　和直接在NavControl你编码扩展一样，直接给对应的Button的Click事件实现其相应的功能就OK。如此一来，在调用的地方就非常简单了，通过用户控件将扩展的功能导航菜单封装起来，原先复杂的编码现在仅仅只需要一行代码就可以实现，其他的事情交给自定义用户控件去完成。
&DeepControls:NavControl&x:Name=&deepNavControl&&RotationOn=&True&&&&&&&StackPanel&Orientation=&Horizontal&&Height=&40&&&&&&&&&&&tb:ToolBarControl&/&&&&&&/StackPanel&&/DeepControls:NavControl&
&　　MouseControl主要用于控制地图界面的拖拽行为等，ZoomSliderControl用于控制地图缩放级别，这两个控件使用和前面的CoordControl差不多，本篇暂不做介绍，在以后的相关篇幅里在来讨论它的相关功能和特性。
本文地址 ：
------分隔线----------------------------Google 地图 API 教程
Google 地图控件集
一个Google 地图 - 默认控件集设置：
Google 地图 - 默认控件集设置：
当使用一个标准的google地图，它的默认设置如下：
.Zoom-显示一个滑动条来控制map的Zoom级别
.PPan-地图上显示的是一个平底碗样的控件，点击4个角平移地图
.MapType-允许用户在map types(roadmap 和 satallite)之间切换
.StreetView-显示为一个街景小人图标，可拖拽到地图上某个点来打开街景
Google 地图 - 更多控件集
除了以上默认控件集,Google还有：
.Scale-显示地图比例尺
.Rotate-显示一个小的圆周图标，可以转动地图
.verview Map-从一个广域的视角俯视地图
创建地图时你可以通过设置选项指定哪些控件集显示或者通过调用 setOptions() 来改变地图的设置选项。
Google 地图 - 关闭默认控件集
你可能希望能够关闭默认的控件集。
为了关闭默认控件集,设置地图的disableDefaultUI的属性为true:
disableDefaultUI:true
Google 地图 - 开所有控件集
一些控件集默认显示在地图上，而其它的不会，除非你设置它们。
设置控件为true使其可见-设置控件为false则隐藏它。
以下实例开启所有的控件：
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true
Google 地图 - 修改控件集
某些地图控件是可配置的。通过制定控件选项域改变控件集。
F举个例子来说，修改Zoom 控件的选项在zoomControlOptions指定。zoomControlOptions包含如下3种选项：
.google.maps.ZoomControlStyle.SMALL-显示最小化zoom 控件
.google.maps.ZoomControlStyle.LARGE-显示标准zoom滑动控件
.google.maps.ZoomControlStyle.DEFAULT-基于设备和地图大小，选择最合适的控件
zoomControl:true,
zoomControlOptions:
style:google.maps.ZoomControlStyle.SMALL
注意： 如果需要修改一个控件，首先开启控件(设置其为true)。
另一个控件为 MapType 控件。
MapType 控件可显示为以下 style 选项之一：
google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。
google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。
google.maps.MapTypeControlStyle.DEFAULT，用于显示"默认"的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化。
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
同样你可以使用ControlPosition属性指定控件的位置:
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
Google 地图 - 自定义控件集
创建一个返回伦敦自定义控件，用于点击事件：
(如果地图被拖拽):
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 = '&b&Home&b&'
controlUI.appendChild(controlText);
Google 地图 - 控件集参考手册
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码403 Forbidden
403 Forbidden}