<!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. 用JavaScript调用WCF Service

    原创地址:http://www.cnblogs.com/jfzhu/p/4039604.html 转载请注明出处 前面介绍过<Step by Step 创建一个WCF Service>和& ...

  2. 測試大型資料表的 Horizontal Partitioning 水平切割

    FileGroup 檔案群組 :一個「資料庫(database)」可對應一或多個 FileGroup,一個 FileGroup 可由一或多個 file (.ndf) 構成. FileGroup 可讓 ...

  3. 启用WebApi 2里的Api描述信息(Help下的Description)

    环境:vs2013+web api 2 问题:默认情况下新建的Web Api 2项目,自带的Help页下会显示Api的相关信息,但Description那一栏无法获取到数据,如下图所示: 解决: 1. ...

  4. 有关binlog的那点事（二）（mysql5.7.13）

    上次,我们仅仅把binlog做了一个概述,并没有去深入探索(1)binlog file究竟是怎么构成的?(2)binlog file的单元binlog events是怎么构成的?(3)我们能不能伪造出 ...

  5. SikuliX简介及安装

    一.简单介绍 SikuliIDE和Sikuli Script就是现在的SikuliX,最新版本是SikuliX1.1.0, 部分兼容Sikuli JAVA API,支持Python和Ruby,Siku ...

  6. Maven Plugins常用配置

    官方文档:http://maven.apache.org/plugins/index.html# 这里主要介绍compiler插件的配置.http://maven.apache.org/plugins ...

  7. 事务复制5： Transaction and Command

    事务复制使用 dbo.msrepl_transactions 和 dbo.MSrepl_commands 存储用于数据同步的Transaction和Command.在replication中,每个co ...

  8. 前端MVVM框架设计及实现（一）

    最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我记得还是去年6月写过一个系列的av ...

  9. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一．图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  10. Android音视频之MediaRecorder音视频录制

    前言: 公司产品有很多地方都需要上传音频视频,今天抽空总结一下音频视频的录制.学习的主角是MediaRecorder类. MediaRecorder类介绍: MediaRecorder类是Androi ...