百度地图key 的获取

　　进入 http://lbsyun.baidu.com/i 登录你的账号

　　

点击进入控制台，复制 ak 的值

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>无标题文档</title>

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

</head>

<body>

 <div class="map">

            <div style="width:1100px;height:400px" id="map"></div>

        </div>

<script type="text/javascript">

    //创建和初始化地图函数：

    function initMap() {

        createMap();//创建地图

        setMapEvent();//设置地图事件

        addMapControl();//向地图添加控件

        addMapOverlay();//向地图添加覆盖物

    }

    function createMap() {

        map = new BMap.Map("map");       //经度      //纬度    //缩放比例

        map.centerAndZoom(new BMap.Point(116.992793,36.655149), 16);

    }

    function setMapEvent() {

        map.enableScrollWheelZoom();

        map.enableKeyboard();

        map.enableDragging();

        map.enableDoubleClickZoom()

    }

    function addClickHandler(target, window) {

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

            target.openInfoWindow(window);

        });

    }

    function addMapOverlay() {

        var markers = [

          { content: "我的备注", title: "我们在这里", imageOffset: { width: 0, height: 3 }, position: { lat: 36.655149 , lng:116.992793 } } // 纬度  经度

        ];

        for (var index = 0; index < markers.length; index++) {

            var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);

            var marker = new BMap.Marker(point, {

                icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {

                    imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)

                })

            });

            var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) });

            var opts = {

                width: 200,

                title: markers[index].title,

                enableMessage: false

            };

            var infoWindow = new BMap.InfoWindow(markers[index].content, opts);

            marker.setLabel(label);

            addClickHandler(marker, infoWindow);

            map.addOverlay(marker);

        };

        var labels = [

        ];

        for (var index = 0; index < labels.length; index++) {

            var opt = { position: new BMap.Point(labels[index].position.lng, labels[index].position.lat) };

            var label = new BMap.Label(labels[index].content, opt);

            map.addOverlay(label);

        };

    }

    //向地图添加控件

    function addMapControl() {

        var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });

        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);

        map.addControl(scaleControl);

        var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });

        map.addControl(navControl);

        var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });

        map.addControl(overviewControl);

    }

    var map;

    initMap();

</script>

</body>

</html>

百度地图 js 调用的更多相关文章

  1. 百度地图JS调用示例

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. Java web与web gis学习笔记（二）——百度地图API调用

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  3. 百度地图--JS版

    百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...

  4. 外部引入的js 判断js脚本加载是否完成，完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  5. HTML 百度地图API调用示例源码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 百度地图js小结

    1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" ...

  7. 百度地图js根据经纬度定位和拖动定位点

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  8. 百度地图API调用实例之地址标注与位置显示

    之前弄了个谷歌地图API标注的调用实例,后来要求改成百度地图. 感谢主,通过网上资料(百度地图API,百度地图API详解之地图标注)收集及研究, 终于把百度地图标注和显示功能实现出来了,具体实现方法如 ...

  9. 百度地图js版定位控件

    一 概述 百度地图在最新版已加入浏览器定位控件,个人认为应该是既高德地图更新了一个浏览器也能定位功能后,百度不甘落后自己简简单单,草草写了个这个功能的定位控件 GeolocationControl 这 ...

随机推荐

  1. ios下编译opencv

    如果想要在ios下编译opencv 需要安装Cmake 这里通过homebrew 来安装cmake ios下打开终端然后先安装 homebrew :(mac 下自带ruby) ruby -e &quo ...

  2. Yii::app()

    Yii::app()返回的是你在index.php里创建的CWebApplication实例. 在一次请求处理过程中,这是个唯一的实例. Yii::app()主要负责一些全局性的功能模块,比如Yii: ...

  3. DAY3-python函数

    目录 一.了解函数 二. 函数定义 三.函数使用原则:先定义,后调用 四.定义函数的三种形式 五.函数的调用 六.函数的参数 七. 函数对象 八.函数嵌套 九.名称空间与作用域 十. 闭包函数 十一. ...

  4. tomcat使用manager管理app时需要身份验证问题

    我们可以通过图形用户界面来管理tomcat,启动tomcat,在地址栏中输入: Java代码 http://localhost:8080 就可以看见tomcat的欢迎页面,点击左边的tomcat ma ...

  5. Android Studio 搭配 Tortoise SVN 安装问题汇总

    (1)Android studio 中想要使用SVN,但是在安装 1.9版本的SVN,会报SVN is too old(实际是太新了)的错误.所以只能下载1.8以下版本 (2)安装svn时,需要手动选 ...

  6. [转]PHP 面试问哪些问题可以比较准确的反映出应聘者的开发水平？

    基础题 场景: 你入职了一家新公司. 上班第一天,接待人给你安排好了座位,然后拉过来一台没拆封的新电脑. 你把电脑连接好之后,按下电源.... 好吧,这真是一台新电脑,里边竟然内置了个DOS系统!! ...

  7. strrpos()和strripos()函数【PHP】

    strripos() 函数 定义和用法 strripos() 函数查找字符串在另一个字符串中最后一次出现的位置. 如果成功,则返回位置,否则返回 false. 语法 strrpos(string,fi ...

  8. 初步认识ASP.NET WebForm

    C#可已进行以下两大类的开发 一.客户端应用程序C/S 主要有两种开发技术: 1.winForm windows窗体应用程序 2.WPF微软新一代图形框架 MFC(比较老的开发技术) MVVM(客户端 ...

  9. javascript使用setTimeout、setInterval时找不到变量的问题

    我们在某个作用域内或者在自己定义的一个类里调用setTimeout.setInterval会经常会遇到找不到某个变量的错误. 比如下面这个例子: window.onload = function(){ ...

  10. General框架如何实现多数据库支持

    关于用C#实现多数据库支持的方式,大家都会多少了解,本文从General框架的开发思路角度详细介绍General框架实现多数据库支持的方式,使更多的人了解General框架的底层实现并得到所需的相关知 ...