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

废话少说，直接上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. Centos 部署Keepalive高可用软件

    Keepalive安装部署   一．环境介绍 1)Centos6.4 2) keepalived-1.2.12 3) 主备机的ip Master:172.31.100.5 Slave: 172.31. ...

  2. NOIP2008普及组传球游戏（动态规划）——yhx

    题目描述 上体育课的时候,小蛮的老师经常带着同学们一起做游戏.这次,老师带着同学们一起做传球游戏. 游戏规则是这样的:n个同学站成一个圆圈,其中的一个同学手里拿着一个球,当老师吹哨子时开始传球,每个同 ...

  3. Ubuntu 14.04 LTS Server 无法挂载光盘 启动initramfs等问题

    今天需要在戴尔R410服务器上装64位的Linux,师兄给了个14.04的server 64位镜像.一开始打算用U盘安装,用软碟通烧写镜像之后,在服务器端设置从U盘启动,但是安装到一半出现了光盘无法挂 ...

  4. 【C#】SQL数据库助手类2.0（自用）

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  5. 从BUG工具redmine上获取数据后借助python模块pycha 画出BUG分析类报表

    整体代码比较冗长,但是很好读.写的方法全是按照BUG分类去写的.所以写死了,凑合看吧,画出饼图,树状图和生成对应的数据excel,希望大家举一反三能帮助自己分析BUG #__author__ = 'x ...

  6. UVALive 5962 Strongly Connected Chemicals --最大独立集

    题意:给n个阳离子和m个阴离子,并给出相互的吸引关系,求一个最大的点集,使其中的每个阴阳离子相互吸引. 解法:枚举每条边,使该条边存在,然后建立反图,求一个最大匹配,此时的点数减去最大匹配与ans求一 ...

  7. HDU 2487 Ugly Windows

    递归求解,代码不太好看,是2013年7月写的 代码: #include<stdio.h> #include<iostream> #include<string.h> ...

  8. 字典树(Tire)模板

    #include<stdio.h> #include<string.h> #include<stdlib.h> struct node { node *ne[]; ...

  9. Angular 入门学习

    1.Hello World 入门 源代码 <!doctype html> <html ng-app> <head> <script src="htt ...

  10. QTP基础学习（二）启动与设置

    1.启动QTP选择要求的Add-in 默认带有3个Add-in,之后可以安装其他的Add-in,如.net的Add-in 2.设置QTP的选项 点击Tools-Options,弹出如下框: 3.建立记 ...