<!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. 《Entity Framework 6 Recipes》翻译系列 (4) -----第二章 实体数据建模基础之从已存在的数据库创建模型

    不知道对EF感兴趣的并不多,还是我翻译有问题(如果是,恳请你指正),通过前几篇的反馈,阅读这个系列的人不多.不要这事到最后成了吃不讨好的事就麻烦了,废话就到这里,直奔主题. 2-2 从已存在的数据库创 ...

  2. Qt Disable QDebug And Warning Output

    如何禁止qDebug的输出 在项目开发的过程中,为了开发方便,我们常常在Qt的Application Output中输出一些内容,慢慢的. 有些qDebug就会被我们遗忘再角落里. 虽然对整个程序影响 ...

  3. maven package 知识（转载）

    “打包“这个词听起来比较土,比较正式的说法应该是”构建项目软件包“,具体说就是将项目中的各种文件,比如源代码.编译生成的字节码.配置文件.文档,按照规范的格式生成归档,最常见的当然就是JAR包和WAR ...

  4. jquery中bind()绑定多个事件

    bind()绑定事件 $(selector).bind(event,data,function): 参数event为事件名称(如"click,mouseover....."),da ...

  5. python 栈和队列（使用list实现）

    5.1.1. Using Lists as Stacks The list methods make it very easy to use a list as a stack, where the ...

  6. PHP钩子机制

    什么是钩子 大家想必听过插件,wordpress插件特别多,这个就是用钩子机制实现的. 当代码在运行的过程中,我们预先在运行的几个特殊点里执行一些特殊方法:例如在运行方法(例如Blog::add的ad ...

  7. 构建基于Chromium的应用程序

    chromium是google chrome浏览器所采用的内核,最开始由苹果的webkit发展而出,由于webkit在发展上存在分歧,而google希望在开发上有更大的自由度,2013年google决 ...

  8. Laravel 5.3 auth中间件底层实现详解

    1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...

  9. 基于ReactCSSTransitionGroup实现react-router过渡动画

      此前,我使用了react-router库来完成单页应用的路由,从而实现组件之间的切换能力.然而,默认页面的切换是非常生硬的,为了让页面切换更加缓和与舒适,通常的方案就是过渡动画. 这里我调研了2种 ...

  10. JQuery插件之Jquery.datatables.js用法及api

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...