代码

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <style type="text/css">

    body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

    #allmap{width:100%;height:100%;}

    p{margin-left:5px; font-size:14px;}

  </style>

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script>

  <title>添加定位相关控件</title>

</head>

<body>

  <div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

  // 百度地图API功能

  var map = new BMap.Map("allmap");

  map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

  // 添加带有定位的导航控件

  var navigationControl = new BMap.NavigationControl({

    // 靠左上角位置

    anchor: BMAP_ANCHOR_TOP_LEFT,

    // LARGE类型

    type: BMAP_NAVIGATION_CONTROL_LARGE,

    // 启用显示定位

    enableGeolocation: true // 会多出一个点

  });

  map.addControl(navigationControl);

  // 添加定位控件

  var geolocationControl = new BMap.GeolocationControl();

  geolocationControl.addEventListener("locationSuccess", function(e){

    // 定位成功事件

    var address = '';

    address += e.addressComponent.province;

    address += e.addressComponent.city;

    address += e.addressComponent.district;

    address += e.addressComponent.street;

    address += e.addressComponent.streetNumber;

    alert("当前定位地址为：" + address);

  });

  geolocationControl.addEventListener("locationError",function(e){

    // 定位失败事件

    alert(e.message);

  });

  map.addControl(geolocationControl);

</script>

效果

百度地图API示例之添加定位相关控件的更多相关文章

  1. 百度地图API示例：鼠标绘制点线面 控件修改

    需求 :在使用地图API时,绘制工具栏控件想自己选择哪些要,哪些不要. 可以查看相应的类:官网地址: http://api.map.baidu.com/library/DrawingManager/1 ...

  2. 百度地图API示例之添加/删除工具条、比例尺控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  3. 百度地图API示例之添加自定义控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  4. 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging

    百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...

  5. 百度地图API示例之设置地图显示范围

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  6. 百度地图API示例之根据城市名设置地图中心点

    代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  7. 百度地图API示例之移动地图

    级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  8. 百度地图API示例之设置地图最大、最小级别

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  9. 百度地图API示例之文本标注

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

随机推荐

  1. js中的Bom对象模型

    Bom可以对浏览器的窗口进行访问和操作.使用Bom,开发者可以移动窗口,改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. window对象: 1.窗口操作 其中moveTo,moveBy是窗 ...

  2. 闭包的理解-from my own opinion

    闭包,说起来那么难,其实理解了作用域,那么理解闭包就容易多了. 全局环境,局部环境,这两个概念很好理解了.那么要深入理解下函数的局部环境. 函数的局部环境,也就是说在一个函数内定义的变量,这个变量只能 ...

  3. css3 倒影

    说起倒影效果,在传统网页中,我们只能使用photoshop进行事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发的效率.而 css3新增了Reflections板块,css  Refl ...

  4. JavaScript原型学习笔记

    1 理解JavaScript原型 什么是原型? 原型是一个对象,其他对象可以通过它实现属性继承. 任何一个对象都可以成为原型么? 是 哪些对象有原型 所有的对象在默认的情况下都有一个原型,因为原型本身 ...

  5. Shell 环境变量 & 参数变量

    环境变量 $HOME 当前用户的家目录 $PATH 以冒号分隔的用来搜索命令的目录列表 $PS1 命令提示符,通常是$字符,但在bash中,可以使用一些更复杂的值.例如,字符串[\u@\h \w]$就 ...

  6. 7个你可能不认识的CSS单位:rem vh vw vmin vmax ex ch

    rem 我们首先介绍下和我们熟悉的很相似的货.em 被定义为相对于当前对象内文本的字体大小.炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于 ...

  7. python学习之路（一）屌丝逆袭之路

    变量                                                                                                  ...

  8. Mysql通信协议

    Mysql四种通信协议(linux下本地连接的都是socket 其他都是tcp) 当连接mysql时,使用-h127.0.0.1时,linux与unix下的连接协议为socket协议,windows下 ...

  9. EDIUS设置3D转场的教程

    当你们学习完了EDIUS 2D转场自定义后,一定也想了解3D是如何自定义的吧!其实用法都差不多,下面就和小编我一起来学习下EDIUS 3D转场自定义设置吧! 1.首先我们还是做好自定义转场的准备工作. ...

  10. 聊一下JS中的作用域scope和闭包closure

    聊一下JS中的作用域scope和闭包closure scope和closure是javascript中两个非常关键的概念,前者JS用多了还比较好理解,closure就不一样了.我就被这个概念困扰了很久 ...