AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

【探索HTML5第二弹03】走近地图应用的世界，看我们google地图可以看些什么！

2017-12-13 993
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

昨天，前天都有一些事情了，自己的学习任务有所耽搁，但这不是主要原因，主要原因是昨天和前天都在搞canvas相关东西，这个东东怎么说呢？我是越搞越不能确定自己是否会用到，所以过程中有点纠结，然后慢慢时间就过去了。另外，我本来想重新学习HTML5的，但是发现在走之前的老路，重复的过程就没必要了，我要从新思考一下最近的学习计划。

最近开始接触了google地图应用，那确实叫一个不错啊！！！可以完成很多事情了，这里用到的是GMaps.js，这里将其简单说下吧！

进入Gmaps的世界



简单应用

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>获取当前位置</title>
 5     <style type="text/css">
 6         #map { width: 1000px; height: 600px; }
 7     
 8     </style>
 9     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
10     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
11     <script src="js/gmaps.js" type="text/javascript"></script>
12     <script type="text/javascript">
13         $(document).ready(function () {
14             /*
15             el 装载地图容器id
16             lat 纬度
17             lng 经度
18             */
19             var map = new GMaps({
20                 el: '#map',
21                 lat: 30.657358499999994,
22                 lng: 104.049977
23             });
24         });
25     </script>
26 </head>
27 <body>
28     <div id="map">
29     </div>
30     
31 </body>
32 </html>
复制代码


这就是最简单的应用了，代码上有一定说明，而且官方的api也很详细。

动态获取当前位置

这里我们与HTML5的Geolocation结合使用，告诉用户当前在哪里，是个不错的选择，借此就可以告诉其周围的酒店什么之类的了。

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取当前位置</title>
    <style type="text/css">
        #map { width: 1000px; height: 600px; }
    
    </style>
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/gmaps.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /*
            el 装载地图容器id
            lat 纬度
            lng 经度
            该应用基于html5，并要求用户共享自身位置
            */
            navigator.geolocation.getCurrentPosition(function (position) {
                
                var map = new GMaps({
                    el: '#map',
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                });
            });
        });
    </script>
</head>
<body>
    <div id="map">
    </div>
    
</body>
</html>
复制代码
参数说明

 这里我们对代码中的一些参数说明，具体见google map api

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取当前位置</title>
    <style type="text/css">
        #map { width: 1000px; height: 600px; }
    
    </style>
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/gmaps.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /*
            el 装载地图容器id
            lat 纬度
            lng 经度
            zoomControl 是否显示缩放控制
            zoomControlOpt 缩放控制样式定义
            panControl  是否显示移动容器
            streetViewControl 是否显示右上角的人，用途不明
            mapTypeControl 是否显示卫星控制
            overviewMapControl 右下角预览地图
            */
            var map = new GMaps({
                el: '#map',
                lat: 30.657358499999994,
                lng: 104.049977,
                zoomControl: true,
                zoomControlOpt: {
                    style: 'BIG',
                    position: 'TOP_RIGHT'
                },
                panControl: true,
                streetViewControl: true,
                mapTypeControl: true,
                overviewMapControl: true, 
            });
        });
    </script>
</head>
<body>
    <div id="map">
    </div>
    
</body>
</html>
复制代码
事件回调

当鼠标在地图上也会有一定事件的哟，不信试试！

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #map { width: 1000px; height: 600px; }
    
    </style>
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/gmaps.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            /*
            el 装载地图容器id
            lat 纬度
            lng 经度
            zoomControl 是否显示缩放控制
            zoomControlOpt 缩放控制样式定义
            panControl  是否显示移动容器
            streetViewControl 是否显示右上角的人，用途不明
            mapTypeControl 是否显示卫星控制
            overviewMapControl 右下角预览地图
            */
            
            /*
            支持以下事件
            bounds_changed     None     This event is fired when the viewport bounds have changed.
            center_changed     None     This event is fired when the map center property changes.
            click     MouseEvent     This event is fired when the user clicks on the map (but not when they click on a marker or infowindow).
            dblclick     MouseEvent     This event is fired when the user double-clicks on the map. Note that the click event will also fire, right before this one.
            drag     None     This event is repeatedly fired while the user drags the map.
            dragend     None     This event is fired when the user stops dragging the map.
            dragstart     None     This event is fired when the user starts dragging the map.
            heading_changed     None     This event is fired when the map heading property changes.
            idle     None     This event is fired when the map becomes idle after panning or zooming.
            maptypeid_changed     None     This event is fired when the mapTypeId property changes.
            mousemove     MouseEvent     This event is fired whenever the user's mouse moves over the map container.
            mouseout     MouseEvent     This event is fired when the user's mouse exits the map container.
            mouseover     MouseEvent     This event is fired when the user's mouse enters the map container.
            projection_changed     None     This event is fired when the projection has changed.
            resize     None     Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .
            rightclick     MouseEvent     This event is fired when the DOM contextmenu event is fired on the map container.
            tilesloaded     None     This event is fired when the visible tiles have finished loading.
            tilt_changed     None     This event is fired when the map tilt property changes.
            zoom_changed     None     This event is fired when the map zoom property changes.

            其中e中包含了地图相关信息

            */
            var map = new GMaps({
                el: '#map',
                lat: 30.657358499999994,
                lng: 104.049977,
                zoomControl: true,
                zoomControlOpt: {
                    style: 'BIG',
                    position: 'TOP_RIGHT'
                },
                panControl: true,
                streetViewControl: true,
                mapTypeControl: true,
                overviewMapControl: true,
                mouseout: function (e) {

                    var s = '';
                }


            });
        });
    </script>
</head>
<body>
    <div id="map">
    </div>
    
</body>
</html>
复制代码
为自己所在位置打上标记

打标记
复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         #map { width: 600px; height: 400px; }
 7     
 8     </style>
 9     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
10     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
11     <script src="js/gmaps.js" type="text/javascript"></script>
12     <script type="text/javascript">
13         $(document).ready(function () {
14             var map = new GMaps({
15                 el: '#map',
16                 lat: 30.657358499999994,
17                 lng: 104.049977
18 
19             });
20             //支持html5
21             GMaps.geolocate({
22                 success: function (position) {
23                     var lat = position.coords.latitude, lon = position.coords.longitude;
24                     map.setCenter(lat, lon);
25                     map.addMarker({
26                         lat: 30.657358499999994,
27                         lng: 104.049977,
28                         title: '您的位置',
29                         infoWindow: {
30                             content: '您在这里'
31                         }
32                     });
33                 },
34                 error: function (error) {
35                     alert('Geolocation failed: ' + error.message);
36                 },
37                 not_supported: function () {
38                     alert("Your browser does not support geolocation");
39                 },
40                 always: function () {
41                 }
42             });
43         });
44     </script>
45 </head>
46 <body>
47     <div id="map">
48     </div>
49     
50 </body>
51 </html>
复制代码
 



位置检索

我们当然可使用搜索技术了，google map api 果然强大！！！

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         #map { width: 600px; height: 400px; }
 7     
 8     </style>
 9     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
10     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
11     <script src="js/gmaps.js" type="text/javascript"></script>
12     <script type="text/javascript">
13         $(document).ready(function () {
14 
15             var map = new GMaps({
16                 el: '#map',
17                 lat: 30.657358499999994,
18                 lng: 104.049977
19             });
20 
21             //支持html5
22             GMaps.geolocate({
23                 success: function (position) {
24                     var lat = position.coords.latitude, lon = position.coords.longitude;
25                     map.setCenter(lat, lon);
26                     map.addMarker({
27                         lat: 30.657358499999994,
28                         lng: 104.049977,
29                         title: '您的位置',
30                         infoWindow: {
31                             content: '您在这里'
32                         }
33                     });
34                 },
35                 error: function (error) {
36                     alert('Geolocation failed: ' + error.message);
37                 },
38                 not_supported: function () {
39                     alert("Your browser does not support geolocation");
40                 },
41                 always: function () {
42                 }
43             });
44 
45             $('#address').change(function (e) {
46                 var el = $(this);
47                 GMaps.geocode({
48                     address: el.val(),
49                     callback: function (r, s) {
50                         if (s == 'OK') {
51                             var latlng = r[0].geometry.location;
52                             map.setCenter(latlng.lat(), latlng.lng());
53                             map.addMarker({
54                                 lat: latlng.lat(),
55                                 lng: latlng.lng(),
56                                 title: el.val()
57                             });
58                         }
59                     }
60                 });
61             });
62 
63 
64         });
65     </script>
66 </head>
67 <body>
68 <input type="text" value="请输入地址" id="address" />
69     <div id="map">
70     </div>
71     
72 </body>
73 </html>
复制代码


在地图上画圈圈！

这个功能真是贴心！公安局或者其他系统，在不同地点会有地区作案数预警信息，更具此功能可以将作案频繁的区域圈起来，重点提示！

画区域


区域高亮显示

我们可以指定某个区域，比如我们的学校，然后在上面浮动一个div写上学校介绍，可以与css共同使用：

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         #map { width: 600px; height: 400px; }
 7     
 8     </style>
 9     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
10     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
11     <script src="js/gmaps.js" type="text/javascript"></script>
12     <script type="text/javascript">
13         $(document).ready(function () {
14             var path = [];
15 
16             var map = new GMaps({
17                 el: '#map',
18                 lat: 30.657358499999994,
19                 lng: 104.049977
20             });
21 
22             //支持html5
23             GMaps.geolocate({
24                 success: function (position) {
25                     var lat = position.coords.latitude, lng = position.coords.longitude;
26                     var tmp = [];
27                     map.setCenter(lat, lng);
28                     map.drawOverlay({
29                         lat: lat,
30                         lng: lng,
31                         layer: 'overlayLayer',
32                         content: '<div style="border: 1px solid black; color: red;">高亮哦</div>'
33                     });
34                 },
35                 error: function (error) {
36                     alert('Geolocation failed: ' + error.message);
37                 },
38                 not_supported: function () {
39                     alert("Your browser does not support geolocation");
40                 },
41                 always: function () {
42                 }
43             });
44 
45 
46         });
47     </script>
48 </head>
49 <body>
50 <input type="text" value="请输入地址" id="address" />
51     <div id="map">
52     </div>
53     
54 </body>
55 </html>
复制代码


右键菜单

我们还可以在地图上搞菜单，搞事件哦！！！

右键菜单


锚点群

最后，我们来看一个非常有用的功能

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         #map { width: 600px; height: 400px; }
 7     
 8     </style>
 9     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
10     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
11     <script src="js/gmaps.js" type="text/javascript"></script>
12       <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js"></script>
13     <script type="text/javascript">
14         $(document).ready(function () {
15             var path = [];
16             var map = new GMaps({
17                 div: '#map',
18                 lat: 30.657358499999994,
19                 lng: 104.049977,
20                 markerClusterer: function (map) {
21                     return new MarkerClusterer(map);
22                 }
23             });
24             var lat_span = 30.657358499999994;
25             var lng_span = 104.049977;
26             for (var i = 0; i < 100; i++) {
27                 var latitude = Math.random()*0.01  + 30.657358499999994;
28                 var longitude = Math.random()*0.01 + 104.049977;
29 
30                 map.addMarker({
31                     lat: latitude,
32                     lng: longitude,
33                     title: 'Marker #' + i
34                 });
35             }
36         });
37     </script>
38 </head>
39 <body>
40 <input type="text" value="请输入地址" id="address" />
41     <div id="map">
42     </div>
43     
44 </body>
45 </html>
复制代码


大家看到了，根据此功能可以完成复杂的应用哦！！！

结语

好了，今天就到这了，经过这次的学习，我想关于地图的应用应该都不在话下了。需要源码直接搜索GMaps.js里面去看吧，我这个都是抄袭哦。




本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/05/09/3068312.html，如需转载请自行联系原作者
文章标签：
JavaScript
前端开发
定位技术
容器
Web App开发
关键词：
HTML应用
google地图
HTML google
HTML地图
地图google
范大脚脚
目录
相关文章
跃@sir
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
跃@sir
232 3
html的七十二变
|
移动开发 前端开发 JavaScript
HTML5 新的 Input可以有哪些好玩的应用
HTML5的新输入类型为应用带来了多种创新和互动功能，显著提升了用户体验和界面趣味性。例如，颜色选择器可动态改变网站主题色；滑块控制适用于音量或亮度调节；日期和时间输入便于预约系统的设计；互动式表单结合多种输入类型实现高效的数据收集；猜数字游戏增加用户参与度；实时搜索建议优化网站搜索功能；图像预览功能让用户上传图片前预览效果；密码可见性切换按钮提升表单的可用性；结合用户位置的电话号码输入则能提供附近服务信息。这些应用场景不仅使网站更具吸引力，还增强了用户的互动体验。
html的七十二变
340 14
dufadayang
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样，它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型，我们可以为用户创造更加流畅和便捷的浏览体验，提升网站的可用性和吸引力。
dufadayang
953 1
html的七十二变
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用，尤其在创建交互式网页游戏时。它支持多种场景，如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码，可实现流畅的拖放交互，并提供视觉反馈，增强用户体验。此外，还需考虑设备兼容性和数据管理，确保游戏在不同设备和浏览器上都能良好运行。总之，HTML5拖放功能使网页游戏更生动有趣。
html的七十二变
580 4
html的七十二变
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `&lt;canvas&gt;` 元素，并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本，以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
html的七十二变
637 3
游客fz577umxdejsg
|
前端开发
酷炫表单，触感未来：HTML与CSS动画的创新应用！
酷炫表单，触感未来：HTML与CSS动画的创新应用！
游客fz577umxdejsg
277 1
Star时光
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
Star时光
395 1
wljslmz
|
存储 移动开发 开发者
深入解析HTML5在Web开发中的优势及其实际应用
【8月更文挑战第24天】
wljslmz
574 0
wljslmz
|
自然语言处理 前端开发 开发者
深入理解HTML中的三种不同类型的列表及其应用
【8月更文挑战第24天】
wljslmz
1053 0
jjczqyjxgdegi
|
域名解析 JavaScript 网络协议
技术心得记录：如何使用google地图的api（整理）
技术心得记录：如何使用google地图的api（整理）
jjczqyjxgdegi
2078 0

热门文章

最新文章

  • 1
    Html2canvas - 项目中遇到的那些坑点汇总(更新中...)
  • 2
    Java操作wkhtmltopdf实现Html转PDF
  • 3
    HTML核心标签之表格标签(二)
  • 4
    第87天：HTML5中新选择器querySelector的使用
  • 5
    HTML5实践 -- 如何使用css3丰富我们的图片样式
  • 6
    html5-俄罗斯方块分析
  • 7
    html 三列布局（两列自适应，一列固定宽度）
  • 8
    HTML Elements 和 DHTML Objects
  • 9
    走进 HTML5：20个惊艳的 HTML5 Canvas 应用试验（转）
  • 10
    《HTML 5+CSS 3入门经典》——第2章　去其糟粕，取其精华——HTML 5 的元素与属性
  • 1
    [AI Google] 如何通过 LearnLM 扩展生成式 AI 的好奇心和理解力
    734
  • 2
    [AI Google] 基于我们对提供负责任的人工智能的承诺
    213
  • 3
    Chrome版本太旧,无法访问此网站www.google.com 的响应时间过长
    1639
  • 4
    禁用Google Chrome自动更新，怎么找到Update目录？
    869
  • 5
    [AI Google] I/O 2024大会上我们宣布的100件事情
    327
  • 6
    Google云计算原理与应用（四）
    464
  • 7
    Google云计算原理与应用（三）
    463
  • 8
    Google云计算原理与应用（二）
    482
  • 9
    Google云计算原理与应用（一）
    720
  • 10
    Android框架-Google官方Gson解析，android开发实验报告总结
    353

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践
    • 下一篇
    阿里云正式发布 Agentic 代码安全：AI驱动的双Agent协同引擎