具体的百度地图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. 第十二届浙江省大学生程序设计大赛-Lunch Time 分类： 比赛 2015-06-26 14:30 5人阅读 评论(0) 收藏

    Lunch Time Time Limit: 2 Seconds Memory Limit: 65536 KB The 999th Zhejiang Provincial Collegiate Pro ...

  2. 【C++】智能指针

    auto_ptr auto_ptr是当前C++标准库中提供的一种智能指针. auto_ptr在构造时获取某个对象的所有去(ownership),在析构时释放该对象.我们可以这样使用auto_ptr来提 ...

  3. python 中time.sleep没有作用

    很简单的一个程序: # -*- coding: utf-8 -*- import MySQLdb,os,json,time #from wsgiref.simple_server import mak ...

  4. collections在java中的常见用法

    1. 工具类collections用于操作集合类,如List,Set,常用方法有: 1) 排序(Sort) 使用sort方法可以根据元素的自然顺序 对指定列表按升序进行排序.列表中的所有元素都必须实现 ...

  5. python学习笔记三 文件操作（基础篇）

    文件操作 打开文件 open(name[,mode[,buffering]])   open函数使用一个文件名作为强制参数,然后返回一个文件对象.[python 3.5 把file()删除掉]   w ...

  6. Android BroadcastReceiver广播接受者

    静态注册 配置清单表注册:只要曾经注册过哪怕关闭也能调用  方式一:sendBroadCastReceive   广播的步骤:       发送  无序广播,普通广播       (1).发送方    ...

  7. c++学习之：根据GetLastError()返回值获取错误信息

    VC中GetLastError()获取错误信息的使用在VC中编写应用程序时,经常需要涉及到错误处理问题.许多函数调用只用TRUE和FALSE来表明函数的运行结果.一旦出现错误,MSDN中往往会指出请用 ...

  8. Centos 中如何快速定制二进制的内核RPM 包

    随着Linux服务器越来越多了,底层系统内核想要保持版本统一就需要定制专门的二进制安装包来便捷的升级和管理. RedHat系那当然就是使用rpmbuild来做定制化管理了. 今天我们分俩个部分(roo ...

  9. WINCE6.0组件选择说明

    WINCE6.0组件选择说明 图1 RAS/PPP组件前面的√标识表示我们手动选择,TAPI2.0前面的■标识表示选组件时根据依赖关系自动选择的,PPPoE前面的□标识组件没有选择.

  10. SQL调用存储过程

    --1调用存储过程exec 存储过程名 参数--2当表使用select a.*,b.* from tb b inner join (select * from openrowset('sqloledb ...