<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
html {
height:100%;
}
body {
height:100%;
margin:0px;
padding:0px;
}
#container {
height:50%;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
<script>
$(function () {
navigator.geolocation.getCurrentPosition(translatePoint); //定位
});
function translatePoint(position) {
var currentLat = position.coords.latitude;//经度
var currentLon = position.coords.longitude;//纬度
var gpsPoint = new BMap.Point(currentLon, currentLat);
BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标
}
function initMap(point) {
//初始化地图
map = new BMap.Map("container");//实例化容器
map.addControl(new BMap.NavigationControl());//平移缩放控件
map.addControl(new BMap.ScaleControl());//比例尺控件
map.addControl(new BMap.OverviewMapControl());//缩略地图控件
map.centerAndZoom(point, 15);//地图初始化，参数地图坐标和级别
map.addOverlay(new BMap.Marker(point));//当前位置加标记
var myZoomCtrl = new ZoomControl();
map.addControl(myZoomCtrl);
function ZoomControl() {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; //调整控件的位置
this.defaultOffset = new BMap.Size(10, 10);//通过像素调整位置
}

//自定义控件，点击两下实现放大
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function (map) {
var div = document.createElement("div");
div.appendChild(document.createTextNode("放大2级"));
div.style.cursor = "pointer";
div.style.border = "1px solid gray";
div.style.backgroundColor = "white";
div.onclick = function (e) {
map.zoomTo(map.getZoom() + 2);
}
map.getContainer().appendChild(div);
return div;
}
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

带有定位当前位置的百度地图web api 前端代码的更多相关文章

  1. 百度地图web api使用案例

    效果如下: 1.获取位置的经纬度: 如坐标:114.110033,22.541098 获取经纬度: http://api.map.baidu.com/lbsapi/getpoint/index.htm ...

  2. C#怎么调用百度地图Web API

    直接上代码: public ActionResult FindMileage() { string s; HttpWebRequest req = (HttpWebRequest)HttpWebReq ...

  3. 【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件

    目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...

  4. C#的百度地图开发(四)前端显示与定位

    原文:C#的百度地图开发(四)前端显示与定位 有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码 <%@ Page  ...

  5. 【转】【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件

    [转][完全开源]百度地图Web service API C#.NET版,带地图显示控件.导航控件.POI查找控件 目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET ...

  6. C# 调用百度地图Web服务API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  7. C# 调用百度地图 Web 服务 API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  8. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  9. 百度地图LBS应用开发代码

    最近因为工作需要,领导要我将51地图API开发的一个应用迁移到百度地图,或者说用百度地图API进行重写,实现同样的功能.我先是把现有的这个51地图的应用了解了一下,然后就试着用百度地图做一些demo, ...

随机推荐

  1. hive executeTask被interrupt处理

    异常信息如下: java.io.IOException: Failed on local exception: java.nio.channels.ClosedByInterruptException ...

  2. JAVA List集合转Page（分页对象）

    /** * @version 1.0 * @author: fwjia */ import java.util.List; public class PageModel<T> { /*** ...

  3. poj 2541 Binary Witch

    Binary Witch http://poj.org/problem?id=2541 Time Limit: 1000MS   Memory Limit: 65536K       Descript ...

  4. iOS通知传值

    NSMutableDictionary *params = [NSMutableDictionary dictionary]; params[@"loginName"] = @&q ...

  5. 【51NOD-0】1137 矩阵乘法

    [算法]简单数学 [题解] 对于A*B=C C中第i行第j列的数字由A中第i行和B中的j列的数字各自相乘后相加得到. 所以两个矩阵能相乘要求A的列数等于B的行数,复杂度为O(n3). #include ...

  6. 【POJ】2892 Tunnel Warfare

    [算法]平衡树(treap) [题解]treap知识见数据结构 在POJ把语言从G++换成C++就过了……??? #include<cstdio> #include<algorith ...

  7. 集合类HashMap，HashTable，ConcurrentHashMap区别？

    1.HashMap 简单来说,HashMap由数组+链表组成的,数组是HashMap的主体,链表则是主要为了解决哈希冲突而存在的,如果定位到的数组位置不含链表(当前entry的next指向null), ...

  8. this指针再解

     this.new.call和apply的相关问题 讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一 ...

  9. Eclipse中SVN更改连接用户

    Eclipse中安装了SVN插件,当连接到SVN服务器后,便无法从客户端更改连接帐号 百度一下,也就知道 查看Eclipse中使用的是什么SVN Interface,位置在windows > p ...

  10. 【Android framework】AndroidManagerService初始化流程

    源码基于Android 4.4.   system_server的初始化 system_server受AMS管理,负责启动framework-res.apk和SettingsProvider.apk. ...