<!DOCTYPE html>

<html>

<head>

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

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

<title>Hello, World</title>

<style type="text/css">

html {

    height: 100%

}

body {

    height: 100%;

    margin: 0px;

    padding: 0px

}

#container {

    height: 100%

}

</style>

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

</script>

</head>

<body>

    <div id="container" style="width: 420px; height: 340px; border: 1px solid gray; float: left;"></div>

    <p>

                纬度：<input name="lng" type="text" id="lng" style="width:200px;" value="120.570464"/>

                经度：<input name="lat" type="text" id="lat" style="width:200px;" value="31.300216"/>

                标注点所在区域：<input name="address" type="text" id="address" style="width:200px;"/>

    </p>

    <script type="text/javascript">

        // http://lbsyun.baidu.com/jsdemo.htm#a1_2

        var map = null;

        var initialFunc = function(){

            map = new BMap.Map("container"); // 创建地图实例

            var point = new BMap.Point(116.404, 39.915); // 创建点坐标

            map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

            map.addControl(new BMap.NavigationControl());

            map.addControl(new BMap.ScaleControl());

            map.addControl(new BMap.OverviewMapControl()); 

            map.addControl(new BMap.MapTypeControl());

            map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

            // 自定义控件

            map.addControl(new myTest.ZoomControlX()); 

            map.addEventListener("click", function(e){

                console.log(e.point.lng + ", " + e.point.lat);

                console.log("您点击了地图。");

            });

            // 拖动地图后地图中心的经纬度信息

            map.addEventListener("dragend", function(){

                 var center = map.getCenter();

                 console.log("地图中心点变更为：" + center.lng + ", " + center.lat);

            });

            var zoomendFunc = function(){

                 console.log("地图缩放至：" + this.getZoom() + "级");

                 // 移除监听事件

                 map.removeEventListener("zoomend", zoomendFunc);

            };

            map.addEventListener("zoomend",zoomendFunc);

            // 标注功能：拖动、打标注

            myTest.markerTest(map);

            // 浏览器定位

            myTest.geolocation(map);

        };

        var myTest = {

                geolocation : function(map) {

                    //关于状态码

                    //BMAP_STATUS_SUCCESS    检索成功。对应数值“0”。

                    //BMAP_STATUS_CITY_LIST    城市列表。对应数值“1”。

                    //BMAP_STATUS_UNKNOWN_LOCATION    位置结果未知。对应数值“2”。

                    //BMAP_STATUS_UNKNOWN_ROUTE    导航结果未知。对应数值“3”。

                    //BMAP_STATUS_INVALID_KEY    非法密钥。对应数值“4”。

                    //BMAP_STATUS_INVALID_REQUEST    非法请求。对应数值“5”。

                    //BMAP_STATUS_PERMISSION_DENIED    没有权限。对应数值“6”。(自 1.1 新增)

                    //BMAP_STATUS_SERVICE_UNAVAILABLE    服务不可用。对应数值“7”。(自 1.1 新增)

                    //BMAP_STATUS_TIMEOUT    超时。对应数值“8”。(自 1.1 新增)

                    var geolocation = new BMap.Geolocation();

                    geolocation.getCurrentPosition(function(r){

                        if(this.getStatus() == BMAP_STATUS_SUCCESS){

                            var mk = new BMap.Marker(r.point);

                            map.addOverlay(mk);

                            map.panTo(r.point);

                            console.log('您的位置：'+r.point.lng+','+r.point.lat);

                        }

                        else {

                            console.log('failed'+this.getStatus());

                        }

                    },{enableHighAccuracy: true})

                },

                // 根据坐标获取地址

                geocoder : function Geocoder(point) {

                    var gc = new BMap.Geocoder();

                    gc.getLocation(point, function (rs) {

                        var addComp = rs.addressComponents;

                        document.getElementById('address').setAttribute('value',addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

                    });

                },

                markerTest : function(map){

                    //　新坐标

                    map.clearOverlays();

                    var pointNew = new BMap.Point(116.404, 39.915);

                    var marker = new BMap.Marker(pointNew);  // 创建标注

                    map.addOverlay(marker);              // 将标注添加到地图中

                    map.panTo(pointNew);

                    marker.enableDragging(); // 可以拖动

                    //创建信息窗口

                    var infoWindow = new BMap.InfoWindow("这就是您公司的位置。<br/>如果不正确，请拖动红色图标");

                    //显示窗口

                    marker.openInfoWindow(infoWindow);

                    //点击监听

                    marker.addEventListener("click", function () {

                        this.openInfoWindow(infoWindow);

                    });

                      //拖动监听

                    marker.addEventListener("dragend", function (e) {

                        //坐标赋值

                        document.getElementById('lng').setAttribute('value',e.point.lng);

                        document.getElementById('lat').setAttribute('value',e.point.lat);

                        myTest.geocoder(e.point);

                    });

                },

                ZoomControlX : ((function(){

                    // 定义一个控件类，即function

                    function ZoomControl(){

                        // 设置默认停靠位置和偏移量

                        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;

                        this.defaultOffset = new BMap.Size(10, 10);

                    }

                    // 通过JavaScript的prototype属性继承于BMap.Control

                    ZoomControl.prototype = new BMap.Control();

                    // 自定义控件必须实现initialize方法，并且将控件的DOM元素返回

                    // 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中

                    ZoomControl.prototype.initialize = function(map){

                        // 创建一个DOM元素

                         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);

                         }    

                         // 添加DOM元素到地图中

                         map.getContainer().appendChild(div); 

                         // 将DOM元素返回

                         return div;

                     }

                    return ZoomControl;

                })()),

        };

        initialFunc();

    </script>

</body>

</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. Redis系列(三)-Redis发布订阅及客户端编程

    阅读目录 发布订阅模型 Redis中的发布订阅 客户端编程示例 0.3版本Hredis 发布订阅模型 在应用级其作用是为了减少依赖关系,通常也叫观察者模式.主要是把耦合点单独抽离出来作为第三方,隔离易 ...

  2. ASP.NET Web API路由系统：Web Host下的URL路由

    ASP.NET Web API提供了一个独立于执行环境的抽象化的HTTP请求处理管道,而ASP.NET Web API自身的路由系统也不依赖于ASP.NET路由系统,所以它可以采用不同的寄宿方式运行于 ...

  3. fir.im Weekly - 暖心的 iOS 持续集成，你值得拥有

    一则利好消息,flow.ci 支持 iOS 项目持续集成,想试试的伙伴去 Gitter群 问问.首批尝鲜用户@阿米amoy 已经用 flow.ci 实现了基本的 iOS 持续集成,并详细记录整个 Bu ...

  4. 修改input框默认黄色背景

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 ...

  5. html中定义标签字母的大小写

    定义和用法: text-transform 属性控制文本的大小写. 值和属性: 值 描述 none 默认.定义带有小写字母和大写字母的标准的文本. capitalize 文本中的每个单词以大写字母开头 ...

  6. SSIS Data Flow优化

    一,数据流设计优化 数据流有两个特性:流和在内存缓冲区中处理数据,根据数据流的这两个特性,对数据流进行优化. 1,流,同时对数据进行提取,转换和加载操作 流,就是在source提取数据时,转换组件处理 ...

  7. Sql Server系列：索引基础

    1 索引概念 索引用于快速查找在某个列中某个特定值的行,不使用索引,数据库必须从第1条记录开始读完整个表,知道找出需要的行.表越大,查询数据所花费的时间越多.如果表中查询的列有索引,数据库能快速到达一 ...

  8. 【原创】开源Math.NET基础数学类库使用(15)C#计算矩阵行列式

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 上个月 ...

  9. Java设计模式之建造者模式（Builder）

    前言: 最近一直在学习okHttp,也对其做了一些整理,okHttp和Retrofit结合大大加速我们的开发效率,源码里面采用了很多设计模式,今天我们来学习一下其中的设计模式之一建造者模式. 建造者模 ...

  10. ASP.NET Core中的依赖注入（5）: ServiceProvider实现揭秘 【解读ServiceCallSite 】

    通过上一篇的介绍我们应该对实现在ServiceProvider的总体设计有了一个大致的了解,但是我们刻意回避一个重要的话题,即服务实例最终究竟是采用何种方式提供出来的.ServiceProvider最 ...