我们就拿百度地图举例吧：

废话少说，直接上Demo

简要截图如下:'

简要代码如下:

<!DOCTYPE html>

<html>

<head>

<title>地图应用</title>

<meta charset="utf-8">

</head>

<body>

<input type="button" id="btn1" value="显示地理信息"/><br/>

<div id="dvShow" style="width:400px;height:400px;border:1px solid blue;"></div>

</body>

</html>

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

<script type="text/javascript">

 var oInput=document.getElementById("btn1");

 oInput.onclick=function(){

   navigator.geolocation.getCurrentPosition(function(position){//写一个成功的回掉函数

     //根据 “经纬度API” 获取位置

      var x=position.coords.longitude;//获取经度

      var y=position.coords.latitude;//获取纬度

     //根据 “百度API” 创建地图

      var map=new BMap.Map("dvShow");

      var pt=new BMap.Point(x,y);

      map.centerAndZoom(pt,14);

      map.enableScrollWheelZoom();//启动滚轮放大缩小,默认是禁止的

      var marker1=new BMap.Marker(pt);//创建标注

      map.addOverlay(marker1);

      //信息窗口展示

       var opts = {

      width : 250,     // 信息窗口宽度

      height: 100,     // 信息窗口高度

      title : "RYJ地图"  // 信息窗口标题

     }

     var infoWindow = new BMap.InfoWindow("这里是RYJ基地中心", opts);  // 创建信息窗口对象

     map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口

	  //---------------------------------------------点击标注弹出信息窗口---------------------------------------------  

        marker1.addEventListener("click", function(e){

            this.openInfoWindow(infoWindow);

        });  

   });

 }

</script>

 

 

百度地图API下载：http://pan.baidu.com/s/1i5CUhKT

HTML5——地图应用的更多相关文章

  1. 7款个性化jQuery/HTML5地图插件

    现在我们经常会用到一些地图应用,无论是在网页上还是手机App中,地图貌似是一个不可或缺的应用.本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件,有几款地图比较实用,有些则是具有 ...

  2. html5 - 地图

    demo截图: demo链接 代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. HTML5地图分布动画

    在线演示 本地下载

  4. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

  5. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  6. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

  7. Html5——地理定位及地图

    常用的navigator.geolocation对象有以下三种方法: 获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callbac ...

  8. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

  9. html5 的百度地图连接

    在一些网站上,我们经常会看到一些地址会有一个图标的形式展现,当你点击的时候就会加载一个你点击区域的地图出来,很神奇的一个功能,在之前是没有这样功能的,都是直接写上地址,你要去的话自己找去吧,现在有了这 ...

随机推荐

  1. HTTP详解2-请求、响应、缓存

    1. HTTP请求格式 做过Socket编程的人都知道,当我们设计一个通信协议时,“消息头/消息体”的分割方式是很常用的,消息头告诉对方这个消息是干什么的,消息体告诉对方怎么干.HTTP协议传输的消息 ...

  2. Android 开发框架

    Android 开发框架包括基本的应用功能开发.数据存储.网络访问三大块. 1 应用方面 一般而言,一个标准的Android 程序包括Activity.Broadcast Intent Receive ...

  3. SpringMVC接收参数的注解笔记

    1.@RequestParam var param = {}; param.keys = delKeys.join();//delKeys是数组,如delKeys=['a',b','c'],join函 ...

  4. 关于volatile和synchronized

    这个可能是最好的对比volatile和synchronized作用的文章了.volatile是一个变量修饰符,而synchronized是一个方法或块的修饰符.所以我们使用这两种关键字来指定三种简单的 ...

  5. POJ 1410 Intersection --几何，线段相交

    题意: 给一条线段,和一个矩形,问线段是否与矩形相交或在矩形内. 解法: 判断是否在矩形内,如果不在,判断与四条边是否相交即可.这题让我发现自己的线段相交函数有错误的地方,原来我写的线段相交函数就是单 ...

  6. HDU 4267 A Simple Problem with Integers --树状数组

    题意:给一个序列,操作1:给区间[a,b]中(i-a)%k==0的位置 i 的值都加上val  操作2:查询 i 位置的值 解法:树状数组记录更新值. 由 (i-a)%k == 0 得知 i%k == ...

  7. ZOJ 1109 Language of FatMouse

    较简单字典树,每输入一对字符串,前一个放在字典(数组)中,后一个插入字典树中,并将其最终的flag赋为前一个在数组中的下标,再就好找了.输入的处理方法要注意一下. 代码: #include <i ...

  8. -bash: wget: command not found的两种解决方法

    今天给服务器安装新环境时,wget 时提示 -bash:wget command not found,很明显没有安装wget软件包.一般linux最小化安装时,wget不会默认被安装,这里是CentO ...

  9. Spring AOP 针对注解的AOP

    我也忘记是从哪里扒来的代码,不过有了这个思路,以后可以自己针对 Controller 还有 Service层的任意 方法进行代理了 package pw.jonwinters.aop; import ...

  10. vuejs常用指令

    v-model 表单双向绑定 v-for="文件名 in 向文件添加内容的文件名" 渲染列表(内容) 将中间的in可改写成of v-on:click="name" ...