<!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. 【效率】专为Win7系统设计的极简番茄计时器 - MiniPomodoro （附源码）

    时光飞逝,一转眼坚持使用番茄工作法已经快3年了!能坚持这么长时间,主要还是得益于它的简单.但是令人纠结的是,这么长时间以来,换了7款不同的番茄计时器,仍然没有找到非常满意的: ■ 机械的噪音太大,会妨 ...

  2. 跟我一起数据挖掘（22）——spark入门

    Spark简介 Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用的并行,Spark,拥有Hadoop MapReduce所具有的优点:但不同于MapR ...

  3. JVM系列-分代收集垃圾回收

    Java自动垃圾回收(Automatic Garbage Collection)是自动回收堆上不再使用的内存,new的对象在程序中没有引用指向它,就会被回收.回收的实现很多,有Reference Co ...

  4. Maven 最佳实践

    持续不断地学习maven Maven是一个很好的工具,但同时也拥有陡峭的学习曲线.因此,将 http://books.sonatype.com/mvnref-book/reference/ 加入到你的 ...

  5. java.lang.IndexOutOfBoundsException at java.io.FileOutputStream.writeBytes(Native Method)

    ss available : /usr/linkapp/data/linkapp/ddn_1440639847758_temp java.lang.IndexOutOfBoundsException ...

  6. Underscore.js使用

    Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象. 他解决了这个问题:"如果我面对一个空白的 ...

  7. Android开发学习之路-LruCache使用和源码分析

    LruCache的Lru指的是LeastRecentlyUsed,也就是近期最少使用算法.也就是说,当我们进行缓存的时候,如果缓存满了,会先淘汰使用的最少的缓存对象. 为什么要用LruCache?其实 ...

  8. Echarts3 关系图-力导向布局图

    因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...

  9. HTML5的实用

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #ffffff } p.p2 ...

  10. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...