HTML5——地图应用

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

废话少说,直接上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

时间: 2024-10-10 22:31:22

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

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

HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内附有时钟效果代码 demo 下载地址,感兴趣的小伙伴们可以收藏一下. 1 超绚丽的 HTML5 地图分布动画 这是一款基于 HTML5 的地图应用,但它不同的地方在于它主要是在地图上实现分布动画,可以利用这款插件实现各个地区之间的客流流向,给人非常直观的数据展现. 2 鼠标滑过粒子挤压动画 粒子动画

html5 的百度地图连接

在一些网站上,我们经常会看到一些地址会有一个图标的形式展现,当你点击的时候就会加载一个你点击区域的地图出来,很神奇的一个功能,在之前是没有这样功能的,都是直接写上地址,你要去的话自己找去吧,现在有了这个人性化的工具之后,我们要找什么地点就明确很多了,在上面可以看到周围的具体环境啊,什么的,交通啊什么的都可以查到,那么,思考一下,要实现这个功能好像十分的困难吧,居然把一个地图给精确定位,太不可思议了. 十分方便的是,我们的html5就能够轻松的帮助我们搞定这个事情,下面我就介绍一下怎么实现地图的呈

HTML5地理定位,百度地图API,知识点熟悉

判断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) { alert('支持地理定位'); } else { alert('不支持地理定位'); } 获取自己位置经纬度 <script> var x=document.getElementById("wrap"); function getLocation () { if (navigator.geolocation) { navigator

HTML5 2D平台游戏开发——地图绘制篇

此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-based,即基于瓦片风格和美术风格两种.Tile-based的典型代表是<Super Mario>(超级马里奥),Art-based记不太清楚了,能够回想起来的是去年出的一款叫做<Owlboy>(猫头鹰男孩)的游戏.      Super Mario  Owlboy 由于Art-based的

HTML5 调用百度地图API地理定位

<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="ht

HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地(转)

HTML5页面直接调用百度地图API,获取当前位置,直接导航目的地 我是应用在微信中,自定义菜单,菜单直接链接到这个HTML5页面,获取当前位置后,页面中定好目的地,这样打开页面后直接进入导航页面 可以省下先发送位置信息后,点确定再出导航,省一步, <!DOCTYPE html> <html lang="zh-cmn-Hans"> <meta charset="UTF-8"> <meta name="viewpor

如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现

一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufylegend.暂时命名为lufylegendRPG.毕竟基于lufylegend,如果名称中不加上lufylegend这几个字的话,有点说不通啊...最近发布了0.1.0版,但是不理想,连一惯都是鼓励和赞赏我的lufy老先生都是出于真心的表示不满意.想了解0.1.0版的朋友可以看看这里(其实最好别看

利用HTML5定位功能,实现在百度地图上定位

利用HTML5定位功能,实现在百度地图上定位 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>HTML5定位</title>     <script type="text/javascript" src="http://lib.sinaapp

利用HTML5定位功能,实现在百度地图上定位(转)

原文:利用HTML5定位功能,实现在百度地图上定位 代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无论使用WIFI还是移动4G联网, 定位精度都是蛮高的,误差在几十米内) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>