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

废话少说，直接上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. Linux 学习之DNS服务器

    概念: DNS:Domain Name System 域名系统 FQDN:Fully Qualified Domain Name 完整主机名 正向解析:由主机名查IP地址 SOA:开始验证(Start ...

  2. 图片代替radio

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. [资料分享]迅为iTOP4412开发板-SDIO WiFi移植文档

    本文转自迅为:http://www.topeetboard.com 概述 近期需要把WiFi无线网络功能移植到iTOP-4412 开发平台,查阅了相关资料,经过一段时间的研究.调试,终于成功的将WiF ...

  4. Linux Bash shell one practice : array if else

    shell practice 1 1.require A B C D 1 2 3 4 5 6 7 8 3 5 8 0 1 2 4 3 after handling: T A B C D A 1 2 3 ...

  5. DW Basic Knowledge1

    以下内容,常读常新,每次都有新的感悟和认识. 数据仓库必须使组织机构的信息变得容易存取. 数据仓库的内容需要是容易理解的,数据对业务人员也必定是直观的,明显的. 数据仓库重新组织了原来OLTP数据库的 ...

  6. 谈MongoDB读取连接超时的异常

    今天在现场的哥们发来异常,让我解决,错误信息如下: HTTP Status 500 - Read operation to server 192.168.1.110:20001 failed on d ...

  7. leetcode_438_Find All Anagrams in a String_哈希表_java实现

    题目: Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Stri ...

  8. UVALive 6092 Catching Shade in Flatland --枚举+几何计算

    题意:x=[-200,200],y=[-200,200]的平面,一天中太阳从不同角度射到长椅(原点(0,0))上,有一些树(用圆表示),问哪个时刻(分钟为单位)太阳光线与这些圆所交的弦长总和最长.太阳 ...

  9. sql 入门经典（第五版） Ryan Stephens 学习笔记 　第四部分：建立复杂的数据库查询/

    第十三章: 在查询表里结合表 1.等值结合 : // 选择 tabla_a 和table_b 中id相等的行,输出 他们的id 和name select table_a.id , table_a.na ...

  10. NVIDIA Physix Unity3D

    提升机器的3D性能 在公司用的台式机看配置不会很差,但是在处理3D方面特别地无奈!例如开个PS,3d MAX就会卡的半死,再多开一会儿就直接未响应,然后机器重启. 真无奈啊,公司暂时也不会给我换电脑或 ...