1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Hello, World</title>
  7. <style type="text/css">
  8. html {
  9.     height: 100%
  10. }
  11.  
  12. body {
  13.     height: 100%;
  14.     margin: 0px;
  15.     padding: 0px
  16. }
  17.  
  18. #container {
  19.     height: 100%
  20. }
  21. </style>
  22. <script type="text/javascript"    src="http://api.map.baidu.com/api?v=2.0&ak=xxx">
  23. </script>
  24. </head>
  25. <body>
  26.     <div id="container" style="width: 420px; height: 340px; border: 1px solid gray; float: left;"></div>
  27.     <p>
  28.                 纬度：<input name="lng" type="text" id="lng" style="width:200px;" value="120.570464"/>
  29.                 经度：<input name="lat" type="text" id="lat" style="width:200px;" value="31.300216"/>
  30.                 标注点所在区域：<input name="address" type="text" id="address" style="width:200px;"/>
  31.     </p>
  32.     <script type="text/javascript">
  33.         // http://lbsyun.baidu.com/jsdemo.htm#a1_2
  34.  
  35.         var map = null;
  36.         var initialFunc = function(){
  37.             map = new BMap.Map("container"); // 创建地图实例
  38.             var point = new BMap.Point(116.404, 39.915); // 创建点坐标
  39.             map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
  40.  
  41.             map.addControl(new BMap.NavigationControl());
  42.             map.addControl(new BMap.ScaleControl());
  43.             map.addControl(new BMap.OverviewMapControl()); 
  44.  
  45.             map.addControl(new BMap.MapTypeControl());
  46.             map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
  47.  
  48.             // 自定义控件
  49.             map.addControl(new myTest.ZoomControlX()); 
  50.  
  51.             map.addEventListener("click", function(e){
  52.                 console.log(e.point.lng + ", " + e.point.lat);
  53.                 console.log("您点击了地图。");
  54.             });
  55.  
  56.             // 拖动地图后地图中心的经纬度信息
  57.             map.addEventListener("dragend", function(){
  58.                  var center = map.getCenter();
  59.                  console.log("地图中心点变更为：" + center.lng + ", " + center.lat);
  60.             });
  61.  
  62.             var zoomendFunc = function(){
  63.                  console.log("地图缩放至：" + this.getZoom() + "级");
  64.                  // 移除监听事件
  65.                  map.removeEventListener("zoomend", zoomendFunc);
  66.             };
  67.             map.addEventListener("zoomend",zoomendFunc);
  68.  
  69.             // 标注功能：拖动、打标注
  70.             myTest.markerTest(map);
  71.  
  72.             // 浏览器定位
  73.             myTest.geolocation(map);
  74.         };
  75.  
  76.         var myTest = {
  77.                 geolocation : function(map) {
  78.                     //关于状态码
  79.                     //BMAP_STATUS_SUCCESS    检索成功。对应数值“0”。
  80.                     //BMAP_STATUS_CITY_LIST    城市列表。对应数值“1”。
  81.                     //BMAP_STATUS_UNKNOWN_LOCATION    位置结果未知。对应数值“2”。
  82.                     //BMAP_STATUS_UNKNOWN_ROUTE    导航结果未知。对应数值“3”。
  83.                     //BMAP_STATUS_INVALID_KEY    非法密钥。对应数值“4”。
  84.                     //BMAP_STATUS_INVALID_REQUEST    非法请求。对应数值“5”。
  85.                     //BMAP_STATUS_PERMISSION_DENIED    没有权限。对应数值“6”。(自 1.1 新增)
  86.                     //BMAP_STATUS_SERVICE_UNAVAILABLE    服务不可用。对应数值“7”。(自 1.1 新增)
  87.                     //BMAP_STATUS_TIMEOUT    超时。对应数值“8”。(自 1.1 新增)
  88.                     var geolocation = new BMap.Geolocation();
  89.                     geolocation.getCurrentPosition(function(r){
  90.                         if(this.getStatus() == BMAP_STATUS_SUCCESS){
  91.                             var mk = new BMap.Marker(r.point);
  92.                             map.addOverlay(mk);
  93.                             map.panTo(r.point);
  94.                             console.log('您的位置：'+r.point.lng+','+r.point.lat);
  95.                         }
  96.                         else {
  97.                             console.log('failed'+this.getStatus());
  98.                         }
  99.                     },{enableHighAccuracy: true})
  100.                 },
  101.                 // 根据坐标获取地址
  102.                 geocoder : function Geocoder(point) {
  103.                     var gc = new BMap.Geocoder();
  104.                     gc.getLocation(point, function (rs) {
  105.                         var addComp = rs.addressComponents;
  106.                         document.getElementById('address').setAttribute('value',addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
  107.                     });
  108.                 },
  109.                 markerTest : function(map){
  110.                     //　新坐标
  111.                     map.clearOverlays();
  112.                     var pointNew = new BMap.Point(116.404, 39.915);
  113.                     var marker = new BMap.Marker(pointNew);  // 创建标注
  114.                     map.addOverlay(marker);              // 将标注添加到地图中
  115.                     map.panTo(pointNew);
  116.                     marker.enableDragging(); // 可以拖动
  117.                     //创建信息窗口
  118.                     var infoWindow = new BMap.InfoWindow("这就是您公司的位置。<br/>如果不正确，请拖动红色图标");
  119.                     //显示窗口
  120.                     marker.openInfoWindow(infoWindow);
  121.                     //点击监听
  122.                     marker.addEventListener("click", function () {
  123.                         this.openInfoWindow(infoWindow);
  124.                     });
  125.                       //拖动监听
  126.                     marker.addEventListener("dragend", function (e) {
  127.                         //坐标赋值
  128.                         document.getElementById('lng').setAttribute('value',e.point.lng);
  129.                         document.getElementById('lat').setAttribute('value',e.point.lat);
  130.                         myTest.geocoder(e.point);
  131.                     });
  132.                 },
  133.                 ZoomControlX : ((function(){
  134.                     // 定义一个控件类，即function
  135.                     function ZoomControl(){
  136.                         // 设置默认停靠位置和偏移量
  137.                         this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
  138.                         this.defaultOffset = new BMap.Size(10, 10);
  139.                     }
  140.                     // 通过JavaScript的prototype属性继承于BMap.Control
  141.                     ZoomControl.prototype = new BMap.Control();
  142.  
  143.                     // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
  144.                     // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
  145.                     ZoomControl.prototype.initialize = function(map){
  146.                         // 创建一个DOM元素
  147.                          var div = document.createElement("div");    
  148.  
  149.                          // 添加文字说明
  150.                          div.appendChild(document.createTextNode("放大2级"));    
  151.  
  152.                          // 设置样式
  153.                          div.style.cursor = "pointer";
  154.                          div.style.border = "1px solid gray";
  155.                          div.style.backgroundColor = "white";    
  156.  
  157.                          // 绑定事件，点击一次放大两级
  158.                          div.onclick = function(e){
  159.                              map.zoomTo(map.getZoom() + 2);
  160.                          }    
  161.  
  162.                          // 添加DOM元素到地图中
  163.                          map.getContainer().appendChild(div); 
  164.  
  165.                          // 将DOM元素返回
  166.                          return div;
  167.                      }
  168.                     return ZoomControl;
  169.  
  170.                 })()),
  171.  
  172.         };
  173.  
  174.         initialFunc();
  175.     </script>
  176. </body>
  177. </html>

javascript 百度地图API - demo的更多相关文章

  1. C#调用百度地图API经验分享（一）

    最近客户提了一个需求,要在网站中添加百度地图的显示,其实原来是有谷歌地图的,但由于谷歌在大陆遭到封杀,只好再给用户增加一个选择了. 下面我将自己最近整理的一些知识分享给大家. 如何使用百度地图API: ...

  2. 百度地图api窗口信息自定义

    百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...

  3. 百度地图API的自动定位和搜索功能（移动端）

    近期有个项目涉及到百度地图API,要求做到自动定位和搜索功能.煞费苦心的研究半天,终于能将两个功能合二为一,现将代码贴出来分享给大家,希望你们的砖搬得又快又好.注释不多,具体请参照:http://lb ...

  4. 百度地图API的使用示例

    刚刚工作的时候写过百度地图API文档,那时候没有记录到技术博客里面,今天在群里看见有个姑娘在问这个问题,重温了一遍,这个API还算好用.百度地图API,集成简单好用,全面,兼容问题,文档全面: 官方文 ...

  5. javascript百度地图使用(根据地名定位、根据经纬度定位)

    需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效: https://promotion.aliyun.com/ntms/yunparter/invite.html? ...

  6. vue项目使用百度地图API获取经纬度

    一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...

  7. 百度地图API试用--(初次尝试)

    2016-03-17: 百度地图API申请key的步骤相对简单,不做过多阐述. 初次使用百度地图API感觉有点神奇,有些功能加进来以后有点问题,注释掉等有空再解决. 代码如下: <%@ page ...

  8. 如何在网页中调用百度地图api

    我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片.但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他们的网站上找到地图接口 ...

  9. 百度地图API多个点聚合时，标注添加的标签label地图刷新就丢失的问题解决

    当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...

随机推荐

  1. 从Knockout到Angular的架构演变

    2008年第一次在WPF中使用MVVM模式之后,就一直热衷于耦合隔离.模块化与重构.UI和逻辑分离.单元测试以及后面的领域模型.谈及MVVM模式,自己也开发过一套框架,但没有长期更新和维护,所以索性就 ...

  2. [nodemon] Internal watch failed: watch ENOSPC错误解决办法

    运行环境:Ubuntu 16.04, WebStorm 2016.1.3, node.js v0.12.5, nodemon 1.9.2 在WS自带的终端输入nodemon server.js启动项目 ...

  3. Ubuntu安装Python2.7,nodejs

    安装Python2.7 sudo add-apt-repository ppa:fkrull/deadsnakes-python2.7sudo apt-get update sudo apt-get ...

  4. LInux 查看环境变量

    1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量hello $ export HELLO="Hello!" $ ech ...

  5. Qt on Android 核心编程

    Qt on Android 核心编程(最好看的Qt编程书!CSDN博主foruok倾力奉献!) 安晓辉 著   ISBN 978-7-121-24457-5 2015年1月出版 定价:65.00元 4 ...

  6. MongoDB 内嵌文档

    MongoDB是文档型的数据库系统,doc是MongoDB的数据单位,每个doc相当于关系型数据库的数据行(row),doc和row的区别在于field的原子性:row中的column是不和分割的原子 ...

  7. Android接入百度自动更新SDK

    一:前言 公司的app,上传到百度应用市场,然后说必须要接入百度的自动更新sdk才能上架,于是从百度官网上去下载jar包,下载的时候必须要带上数据统计,如果使用自动的jar包,还需要带上广告联盟,坑爹 ...

  8. jQuery 自带的动画效果

    1.方法: show:显示选中元素. hide:隐藏选中元素. toggle:显示或隐藏选中元素. fadeIn:将选中元素的不透明度逐步提升到100%. fadeOut:将选中元素的不透明度逐步降为 ...

  9. iOS开发之SQLite-C语言接口规范(二) —— Prepared Your SQL Statements

    在<SQLite的C语言接口规范(一)>中介绍了如何去连接打开数据库,本篇博客就介绍如何操作数据库,本篇主要给出了如何执行数据库查询语句(Select), 然后遍历结果集.本篇博客就直接使 ...

  10. 玩转Jquery，告别前端知道思路忘记知识点的痛苦

    本节内容: 本章主要讲解一下jquery,主要是工作中用的前端框架是datetables框架,然后datetables框架又是基于jqeury研发的,所以要想学一个东西,就必须要了解其底层,不然走路都 ...