<!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. ASP.NET Web API中的Controller

    虽然通过Visual Studio向导在ASP.NET Web API项目中创建的 Controller类型默认派生与抽象类型ApiController,但是ASP.NET Web API框架本身只要 ...

  2. sql 笔记(mysql)

    Windows 安装mysql(zip包) 1,zip包解压到要安装目录 2,配置环境变量,Path后加mysql路径\bin 3,修改配置文件,mysql目录下my-default.ini base ...

  3. javaScript 基础知识

    一.三个对话框 1.alert("提示信息") 弹出只带有一个确定按钮的对话框2.confirm("提示信息") 弹出有确定和取消按钮的对话框3.prompt( ...

  4. Gitcafe绑定自定义域名

    之前将自己练习写作工具替换为Markdown,部署工具改为Hexo,并且将托管地搬家到GitCafe之后,便是被各种的舒爽所围绕.具体折腾的详情参见使用Hexo搭建专属Blog.她们的组合方便快捷,让 ...

  5. Atitit常见的标准化组织与规范数量jcp ecma iso

    Atitit常见的标准化组织与规范数量jcp ecma iso 1. 常见的标准化组织1 1.1. 重要的基金会apache1 1.2. 美国国家标准学会(American NationalStand ...

  6. 3.用Redis Desktop Manager连接Redis

    Redis Desktop Manager是Redis图形化管理工具,方便管理人员更方便直观地管理Redis数据. 然而在使用Redis Desktop Manager之前,有几个要素需要注意: 一. ...

  7. react-native 简述

    1. RN 是什么 2. RN 与传统Hybrid框架相比的优势 3. RN的优势 4. RN的劣势 5. RN开发重点关注的问题 1 RN是什么 2 RN 与传统Hybrid框架相比的优势 传统的如 ...

  8. 移动web app开发必备 - Deferred 源码分析

    姊妹篇  移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...

  9. 编译opengl编程指南第八版示例代码通过

    最近在编译opengl编程指南第八版的示例代码,如下 #include <iostream> #include "vgl.h" #include "LoadS ...

  10. AngularJS之Dependency Injection（五）

    前言 这一节我们来讲讲AngularJS中的依赖注入,在实际开发中Angular提供了具体的方法供我们去调用,但是一旦业务不能满足要求或者出现麻烦或者错误时导致无从下手,所以基于此我们有必要深入一点去 ...