html5 移动端 googleMapApi 使用

看了一天多的googleMapApi 全英文的东西对我来说着实不易,琢磨着还是了解了个大概。难得一次进下心来,还是将收获和大家分享

对于初学的人来说最讨厌那种说了一大串的东西,搞得人晕头转向的,不知所云,看了很多东西还是没有懂。我就简单重点的介绍。

使用google的东西,先FQ这是没得说的,推荐一个插件ecross-free  http://aiyonghome.cn/ec/index.html  手机FQ:frquoter 自己下载。

申请密钥(yue) http://www.google.com/apis/maps/signup.html

看api文档:https://developers.google.com/maps/documentation/javascript/examples/place-search?hl=itutm

上面有首页 指南 参考网页 实例 这个几个导航 我建议先看实例,根据他展示的功能做到预览的效果然后再根据自己的需求,选择性的学习。

下面我来大概的赘述下:

<!DOCTYPE HTML>这个应该不会陌生吧,申明文档内容hmlt5.

用script标签引入google map api javascript.

创建一个di 为map_canvas的div 容器。

在script中创建google map的一些所需属性功能。

时间: 2024-10-12 08:27:44

html5 移动端 googleMapApi 使用的相关文章

HTML5 移动端web

概述 HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 video 和 audio 元素 用于定位的 Geolocation API 本地存储以及离线应用 Web Workers.Web WebSocket API 移动前端开发可分为: 手机网页开发.这部分跟web前端开发差别不大,使用的技术都是html+css+js.区别为手机浏览器是webki

html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

对于动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高设置 汝甚吊

第九十一节,html5+css3pc端固定布局,完成首页

html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瓢城旅行社</title> <link

发布一款html5移动端scroll框架:xScroll

想写这个框架很长时间了,一直没有时间,断断续续写了一些,端午节这两天宅在家把它完成了. 兼容ie9+以上windowphone,android,ios等支持现代浏览器的移动端. 支持多层嵌套scroll和页面多scroll,随时改变宽度和改变内容对scroll无影响,开发者只需关注内容和业务逻辑. 废话少说,以下是github地址和demo地址,欢迎大家拍砖. github: https://github.com/ouxingzhi/xscroll demo: http://ouxingzhi.

第九十节,html5+css3pc端固定布局,底部区域,说明区域,版权区域

html5+css3pc端固定布局,底部区域,说明区域,版权区域 完成: HTML代码: <!--尾部--> <footer class="wei-bu"> <div class="wei-bu2"> <div class="yy dd1"> <h2>合作伙伴</h2> <hr> <ul> <li>途牛旅游网</li> <

html5,移动端开发(1)

html5移动端android方面知识准备 因为是在移动端去加载html5的网页,所以需要去了解android的中关于WebView的知识,android的webview中的一些关于html5一些新特性. html5中js的新特性. 本地缓存,session缓存,html5本地数据库,html5的应用程序缓存,利用pushState,replaceState css适配问题,css响应式布局,涉及到的<meta name="viewport" content="widt

HTML5移动端图片左右切换动画

插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款HTML5图片切换动画的两侧有淡化处理,因此更显立体效果. 找html5教程开发,canvas开发,jquary特效的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的,请联系涂志海,再解决,嘿嘿)同样的,这里静态图片完全体现不出来这个插件的效果,大家可以点击演示地址看看. 下 载 演

html5 移动端单页面布局

序     移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都是在一个页面下进行 不需要页面跳转 ,再通俗的说就是类似于平常的选项卡 但是他又比选项卡要复杂一点 因为他是在手机端 并且当做是一个页面 单页面的作用以及优势:    1.嵌套到native里实现app的混合开发    2.数据量小的页面用单页面便于开发    3.无需跳转页面响应更快 Demo效果

HTML5 PC端框架

HTML5  PC端框架 1.        Bootstrap Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstrap提供了优雅的HTML和CSS规范,Bootstrap的源代码是使用less编写的:基于jQuery框架开发,并在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件.Boo