代码

<!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. 对比学习UIKit和AppKit -- ViewController

    在iOS中ViewController的基类是UIViewController:Mac中ViewController的基类是NSViewController. Mac中ViewController父类 ...

  2. DOM优化

    一:DOM与浏览器: 重排:改变页面的内容. 重绘:浏览器显示的内容. 添加顺序:尽量在appendchild之前. 合并DOM操作-利用csstext, 缓存布局信息 文档碎片. 二 DOM 与事件 ...

  3. Mac下同时安装多个版本的JDK & Mac 可设置环境变量的位置、查看和添加PATH环境变量

    http://ningandjiao.iteye.com/blog/2045955 http://elf8848.iteye.com/blog/1582137

  4. bsp STEP

    Web开发不仅现在比较流行,将来也会.我来谈一下最近bsp  application项目的体会吧,属初学者,请各位多多指教. SAP 的web开发方法有很多种,bsp只是其中一种,而bsp开发有可以分 ...

  5. 团队开发——冲刺1.d

    冲刺阶段一(第四天) 1.昨天做了什么? 完成部分界面设置,补充三层难度界面.游戏结束界面. 2.今天准备做什么? 优化界面细节.查看C#资料,再解决自己电脑的问题. 3.遇到什么困难? 已经固定好的 ...

  6. Linux下使用yum安装MariaDB

    版本:centos7 Linux下安装MariaDB官方文档参见:https://mariadb.com/kb/zh-cn/installing-mariadb-with-yum/ 1.创建Maria ...

  7. Spring框架学习(一)

    一.概述 spring是J2EE应用程序框架,是轻量级的IoC和AOP的容器框架,主要是针对javaBean的生命周期进行管理的轻量级容器.为软件开发提供全方位支持的应用程序框架. 二.控制反转(In ...

  8. sscanf，sscanf_s及其相关用法

    #include<stdio.h> 定义函数 int sscanf (const char *str,const char * format,........); 函数说明  sscanf ...

  9. iar 错误解决

    使用原来备份的项目可以正确烧写并进入调试状态,但使用新项目则报错,错误提示为Failed to load debugee: E:\工作\项目-农业\KaCES-F\Debug\Exe\kaces.tx ...

  10. 使用yield关键字来提高性能

    比如我们在开发当中往往会遇到这样的问题: public List<string> FindBobs(string [] names)   { List<string> bobs ...