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

废话少说，直接上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. SSL certificate problem unable to get local issuer certificate解决办法

    SSL certificate problem unable to get local issuer certificate 解决办法: 下载:ca-bundle.crt 将它放在自己的wamp或者x ...

  2. OpenGL 学习笔记 01 环境配置

    以下教程仅适用于Mac下的Xcode编程环境!其他的我也不会搞. 推荐教程:opengl-tutorial  本项目Github网址       OpenGL太可怕了...必需得把学的记下来,不然绝壁 ...

  3. hdu1710（二叉树的历遍）

    /* Binary Tree Traversals Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...

  4. Unity2D Sprite Packer用法介绍

    想充分利用图片空间? 我们用来做sprite的图片通常会留有很多空白的地方,我们在画完了sprite之后,这些地方很可能就没有什么作用了. 如果想避免这些资源上的浪费,我们可以把各个sprite做成图 ...

  5. Vector3D - AS3

    Vector3D 类使用笛卡尔坐标 x.y 和 z 表示三维空间中的点或位置.与在二维空间中一样,x 属性表示水平轴,y 属性表示垂直轴.在三维空间中,z 属性表示深度.当对象向右移动时,x 属性的值 ...

  6. JMeter学习（五）检查点

    JMeter也有像LR中的检查点,本篇就来介绍下JMeter的检查点如何去实现. JMeter里面的检查点通过添加断言来完成. 检查点:上一章讲到,我们对用户名和密码进行了参数化,那么怎样来判断jme ...

  7. sort（）和qsort（）方法详解

    1,C++自带的自动排序方法:sort(); 要使用此函数只需用#include <algorithm> sort即可使用. sort(begin,end),表示一个范围,例如: int ...

  8. javascript中的array对象属性及方法

    Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...

  9. Java 数据类型和变量

    1.1 基本类型与引用类型的区别 1.基本类型代表简单的数据类型,比如整数和字符,引用类型所引用的实例能表示任意一种复杂的数据类型. 2.基本类型仅表示数据类型,而引用类型所引用的实例除了表示复杂数据 ...

  10. page-cache层以及各种标志位之间的转换

    对真实文件系统层,算是懂了,但是vfs层以及block层还是有点生疏呢,最近要好好分析一下了. page-cache层主要关注文件读写时的行为,包括页的状态之间的变化,何时变脏,何时变成writeba ...