带有定位当前位置的百度地图前端web api实例代码

废话不多说，直接给大家贴代码了，具体代码如下所示，

关键代码如下：

<!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>
赞 (0)

相关推荐

  • java调用百度定位api服务获取地理位置示例

    复制代码 代码如下: package test; import java.io.BufferedReader;import java.io.IOException;import java.io.InputStream;import java.io.InputStreamReader;import java.io.Reader;import java.net.URL;import java.nio.charset.Charset; import org.json.JSONException;imp

  • 利用百度地图API获取当前位置信息的实例

    利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了.这里分享一个制作的JS可以实现登录网页后定位: <script type="text/javascript"> var map; var gpsPoint; var baiduPoint; var gpsAddress; var baiduAddress; var x; var y; function getLocation() { //根据IP获取城市 var myCity = new BMap.

  • 百度地图API应用之获取用户的具体位置

    百度地图API应用之获取用户的具体位置

    功能的大概:用户通过点击地图上面的位置,在地图上面进行描点,然后再把获取的到的地理位置保存到地图上面的地址栏目中. 主要是百度地图API的使用 复制代码 代码如下: var map = new BMap.Map("allmap"); //实例化一个地图对象var point = new BMap.Point(116.331398,39.897445); //设置地图中心的位置map.centerAndZoom(point,12); //设置地图元素的可视层 map.enableScro

  • 带有定位当前位置的百度地图前端web api实例代码

    废话不多说,直接给大家贴代码了,具体代码如下所示, 关键代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content=

  • Android 百度地图POI搜索功能实例代码

    Android 百度地图POI搜索功能实例代码

    在没介绍正文之前先给大家说下poi是什么意思. 由于工作的关系,经常在文件中会看到POI这三个字母的缩写,但是一直对POI的概念和含义没有很详细的去研究其背后代表的意思.今天下班之前,又看到了POI这三个字母,决定认认真真的搜索一些POI具体的含义. POI是英文的缩写,原来的单词是point of interest, 直译成中文就是兴趣点的意思.兴趣点这个词最早来自于导航地图厂商.地图厂商为了提供尽可能多的位置信息,花费了很大的精力去寻找诸如加油站,餐馆,酒店,景点等目的地,这些目的地其实都可

  • Android百度定位导航之基于百度地图移动获取位置和自动定位

    Android百度定位导航之基于百度地图移动获取位置和自动定位

    一.问题描述 使用百度地图实现如图所示应用,首先自动定位当前我起始位置(小圆点位置),并跟随移动不断自动定位我的当前位置 百度Api不同版本使用会有些差异,本例中加入lib如下: 二.编写MyApplication类 public class MyApplication extends Application { static MyApplication myApplication; BMapManager mBMapManager = null; String mStrKey = "7ZfuR

  • 关于Android高德地图的简单开发实例代码(DEMO)

    废话不多说了,直接给大家上干货了. 以下为初次接触时 ,练手的DEMO import android.app.Activity; import android.app.ProgressDialog; import android.content.ContentValues; import android.database.Cursor; import android.database.SQLException; import android.database.sqlite.SQLiteDatab

  • Vue组件之高德地图地址选择功能的实例代码

    注:本文基于上一篇文章[Vue-Cli 3.0 中配置高德地图 ] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2. 如果没有传入坐标点,则定位到当前所在位置 3. 定位成功要在右侧显示经纬度和地址 4. 可以通过拖动 标记 来调整定位点 5. 标记 拖动后,右侧要显示拖动后的经纬度和地址 6. 点击确定按钮,返回最后的坐标点和地名给父组件 三. 组件实现具体代码 <template> <div cla

  • 基于Bootstrap和jQuery构建前端分页工具实例代码

    基于Bootstrap和jQuery构建前端分页工具实例代码

    前言 为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看 业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页 常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的 前端分页 优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询

  • 关于在vue 中使用百度ueEditor编辑器的方法实例代码

    1. 安装  npm i vue-ueditor --save-dev 2.从nodemodels  取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ueditor.config.js 的  21行代码  更改路径   var URL = '/static/ueditor1_4_3_3/' || getUEBasePath();  (1)     serverUrl: URL + 'php/controller.php',  这里是你配置的上传内容的

  • vue 地图可视化 maptalks 篇实例代码详解

    Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库结合, 开发各种二三维效果, 例如 echarts/d3/THREE 等 - 很认真的优化了绘制性能 - 很重视测试, 有接近 1.5K 个单元测试用例, 所以稳定性还不错, 已经应用在很多大大小小的系统上了 上面是一段 maptalks 官方介绍,下面来创建工程.首先利用 vue-cli3 搭建一

  • vue3.0引入百度地图并标记点的实现代码

    vue3.0引入百度地图并标记点的实现代码

    首先新建一个js,主要用来引入百度地图的js,代码如下: export function baiduMap() { return new Promise(function(resolve, reject) { window.baiduMap = function() { resolve() } var script2 = document.createElement('script') script2.type = 'text/javascript' script2.src = `http://

  • js仿百度贴吧验证码特效实例代码

    js仿百度贴吧验证码特效实例代码

    今天看到有百度验证码挺有意思的,就把它仿下来了. 利用JS实现当选择满4个后自动对比,本文中采用静态对比的方法看你是否全部选择对.然后提示[答案正确!]或[答案错误!], 以后有空再去做成程序,先分享给大家! 效果图如下: 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

随机推荐