具体的百度地图API的使用方法查看百度地图API里的DEMO

<style>

    #div1{ width:400px; height:400px; border:1px #000 solid;}

</style>

<script src="http://api.map.baidu.com/api?v=1.3"></script>

<script>

window.onload = function(){

    var oInput = document.getElementById('input1');

    oInput.onclick = function(){

        navigator.geolocation.getCurrentPosition(function(position){

            //获取经度和纬度

            var y = position.coords.longitude;

            var x = position.coords.latitude;

            var map = new BMap.Map("div1");//创建地图对象

            var pt = new BMap.Point(y, x);//将经度和纬度传进来

            map.centerAndZoom(pt, 14);  //地图缩放层级

            map.enableScrollWheelZoom();  //鼠标滚轮放大缩小

            var myIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30));

            var marker2 = new BMap.Marker(pt,{icon:myIcon});      // 创建标注

            map.addOverlay(marker2); 

            var opts = {

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

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

              title : "妙味课堂"  // 信息窗口标题

            }

            var infoWindow = new BMap.InfoWindow("IT培训机构", opts);  // 创建信息窗口对象

            map.openInfoWindow(infoWindow,pt); //开启信息窗口

        });

    };

};

</script>

</head>

<body>

    <input type="button" value="请求" id="input1" />

    <div id="div1"></div>

</body>

HTML5结合百度地图API创建地图应用的更多相关文章

  1. js调用百度地图API创建地图，搜索位置

    实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <met ...

  2. js调用百度地图API创建地图

    技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...

  3. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

  4. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  5. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  6. js百度地图API创建弧线并修改弧线的弧度

    去百度API官网下载CurveLine.min.js,注意复制下来的Js前面的行号要删除. // 百度地图API功能 var map = new BMap.Map("container&qu ...

  7. 百度地图api根据地图缩放等级显示不同的marker点，功能二

    功能一里面有marker点后台的代码 根据地图的缩放等级显示不同marker点的坐标JSP代码 <%@ page language="java" contentType=&q ...

  8. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  9. 百度地图API实现地图定位

    1.引用JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...

随机推荐

  1. CountDownLatch使用例子

    CountDownLatch是一个同步辅助类,犹如倒计时计数器,创建对象时通过构造方法设置初始值,调用CountDownLatch对象的await()方法则处于等待状态,调用countDown()方法 ...

  2. Spring 中的页面重定向

    在写 java 程序设计实践作业的时候遇到了重定向页面的需求,因为还没学到 java web 开发,所以自己就在网上搜了一下相关的代码,总结出了一些小小的经验,希望在下学期学 java web 的时候 ...

  3. Gearman任务分布系统部署windows平台_使用Cygwin

    1.下载Cygwin http://www.cygwin.com/ 然后选择 Install from Internet  -> Direct Connection -> 选择第一个网址就 ...

  4. word2007如何进行批注

    在正常的办公或者学校撰写论文,请别人进行提出修改意见是不可避免的,在word2007中提供了批注修改模式,十分方便,给撰写文档和批阅文档的人带来了极大的方便.本节介绍如何在word2007中进行批注及 ...

  5. SqlSever基础 dateadd month 增加五个月

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  6. BZOJ 3564 信号增幅仪

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3564 题意:给出平面上n个点,画出一个椭圆,椭圆的长轴是短轴的p倍,且长轴的方向为x轴逆时 ...

  7. 浅思OC的语言特性

    算了算,学习IOS已经有一段时间了.今天花了点时间思考一下OC的语言特性,让自己的心不要那么浮躁,注重基础,回归本源. OC做为一门面向对象语言,自然具有面向对象的语言特性,如封装.继承.多态.他具有 ...

  8. C++ 函数后加const

    1.非静态成员函数后面加const(加到非成员函数或静态成员后面会产生编译错误)2.表示成员函数隐含传入的this指针为const指针,决定了在该成员函数中,    任意修改它所在的类的成员的操作都是 ...

  9. albert1017 Linux下压缩某个文件夹（文件夹打包）

    albert1017 Linux下压缩某个文件夹(文件夹打包) tar -zcvf /home/xahot.tar.gz /xahottar -zcvf 打包后生成的文件名全路径 要打包的目录例子:把 ...

  10. Web项目中创建简单的错误处理页面

    当应用程序出现错误的时候,如果没有做错误页面处理的话,会直接输出一些敏感的信息出来,有时候甚至会直接将项目所在的物理路径给显示出来,严重缺乏安全性,并且错误种类繁多,页面风格不一,导致用户体验不好,本 ...