<!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. xml 通过正则抓取字段

    $str = '<xml> <appid><![CDATA[wxd49ea66070209a6e]]></appid> <bank_type> ...

  2. 【转载】Java JVM ： Xms Xmx PermSize MaxPermSize 区别

     转载自:http://cxh61207.iteye.com/blog/1160663 java JVM虚拟机选项: Xms Xmx PermSize MaxPermSize 区别 Xms 是指设定程 ...

  3. 【Foreign】不等式 [数论]

    不等式 Time Limit: 10 Sec  Memory Limit: 128 MB Description 小z热衷于数学. 今天数学课的内容是解不等式:L<=S*x<=R .小z心 ...

  4. js localtion.href 数据传输

    1.今天发现的一种数据发送 如下标红 <script> <%--测试juquery的代码如下操作.我们可以看出使用juquery 进行选择标签的属性可以更加方便--%> con ...

  5. SpringBoot工程目录配置

    Spring Boot建议的目录结果如下: root package结构:com.example.myproject   com +- example +- myproject +- Applicat ...

  6. pinctrl框架【转】

    转自:http://www.cnblogs.com/kevinhwang/p/5703192.html pinctrl框架是linux系统为统一各SOC厂家pin管理,目的是为了减少SOC厂家系统移植 ...

  7. C++学习之路（七）：以const，enum，inline替换#define

    这篇博文主要是编程中的一些问题和技巧.如题目所示,这些关键字的作用不再进行描述.直接描述功能和实例代码. 首先,在头文件中对类进行定义,是不会为类分配内存空间的,在这一点上类定义可以和普通变量类型的声 ...

  8. gpio子系统和pinctrl子系统（中）

    pinctrl子系统核心实现分析 pinctrl子系统的内容在drivers/pinctrl文件夹下,主要文件有(建议先看看pinctrl内核文档Documentation/pinctrl.txt): ...

  9. Oracle例外定义

    例外名 ORA-XXXXX SQLCODE ACCESS_INTO_NULL ORA-06530 -6530 CASE_NOT_FOUND ORA-06592 -6592 COLLECTION_IS_ ...

  10. 【学习笔记】动态树Link-Cut-Tree

    这是两个月前写的,看能不能搬运过来…… 动态树是一类维护森林连通性的问题(已纠正,感谢ZQC巨佬),目前最(wo)常(zhi)见(hui)的动态树就是LCT(Link-Cut-Tree),然而LCT似 ...