百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。另外，2014年1月9日，极速版JavaScript API全新上线，此版本专门针对简单功能的移动端浏览器开发提供。

该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。

　百度地图官网首页：http://lbsyun.baidu.com/

ak申请地址： http://lbsyun.baidu.com/apiconsole/key?application=key

api 文档下载：http://lbsyun.baidu.com/index.php?title=jspopular/js-download

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
    <title>百度地图</title>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
<script src="js/map.js"></script>
</body>
</html>
<script>
　　function mapCallback() {
    var map = new BMap.Map("container");
    var point = new BMap.Point(108.92713066909194, 34.228349244048696);//设置坐标点
    map.addControl(new BMap.MapTypeControl());
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
    map.enableScrollWheelZoom(true);
    var icon = new BMap.Icon('img/loca.svg', new BMap.Size(50, 50), {//添加图标
        anchor: new BMap.Size(20, 20)
    });
    var mkr = new BMap.Marker(new BMap.Point(108.92713066909194, 34.228349244048696), {//中心点
        icon: icon
    });
    var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "Hello", // 信息窗口标题
        enableMessage: true,//设置允许信息窗发送短息
        message: "这个消息为啥不会显示。。。"
    };
    var infoWindow = new BMap.InfoWindow("世界这么大，我想到处走走~", opts);  // 创建信息窗口对象
    map.addEventListener('touchstart', function (e) {//输出经纬度坐标
        var newOne = new BMap.Point(e.point.lng + "," + e.point.lat);
        console.log(newOne);
        mkr.openInfoWindow(infoWindow, point); //开启信息窗口
    });
//        var local = new BMap.LocalSearch(map, {
//            renderOptions:{
//                map: map,
//                autoViewport:true
//            }
//        });
//        local.searchNearby("小吃","门前");
    map.centerAndZoom(point, 17);
    map.addOverlay(mkr);
}
function loadScript() {//map ver2.0
    var script = document.createElement('script');
    script.src = "http://api.map.baidu.com/api?v=2.0&ak=CvyXEc7z4BO6IYkTfHU4POsluYKkAFdV&callback=mapCallback";
    document.body.appendChild(script);
}
window.onload = loadScript();

</script>

效果图：


 

百度地图 ver2.0 api的更多相关文章

  1. C# 调用百度地图Web服务API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  2. C# 调用百度地图 Web 服务 API

    最近公司项目中需要根据两个地点的交通路径和距离做一些数据推荐,为了程序的稳定和用户体验所以想从百度地图 API 采集数据保存到数据库中,经过一翻研究之后选定了百度地图 Web 服务 API 中的 Di ...

  3. 【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件

    目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET.BMap.NET.WindowsForm以及BMap.NET.WinformDemo. BMap.NET 对百度地 ...

  4. 【转】【完全开源】百度地图Web service API C#.NET版，带地图显示控件、导航控件、POI查找控件

    [转][完全开源]百度地图Web service API C#.NET版,带地图显示控件.导航控件.POI查找控件 目录 概述 功能 如何使用 参考帮助 概述 源代码主要包含三个项目,BMap.NET ...

  5. 百度地图api2.0体验

    前言:这两天在做百度地图的功能,查看了百度官网的api完成了基本功能 api地址http://developer.baidu.com/map/jshome.htm 注意是javascript API ...

  6. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

  7. 微信小程序，天气预报（百度地图开放平台API）

    小程序看似一种全新的东西,但好在基本上就是曾经HTML,CSS,JS的一个微变版本. 语法和之前一样.只是一些用法和名字(标签)发生了一些变化. 小程序主要就四种扩展名的文件:js,json,wxml ...

  8. 百度地图js lite api 支持点聚合

    百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造. 我们知道点聚合需要引入开源库: MarkerClusterer:  http ...

  9. 百度地图V2.0实践项目开发工具类bmap.util.js V1.4

    /** * 百度地图使用工具类-v2.0(大眾版) * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @em ...

随机推荐

  1. Oracle 查找带有CLOB字段的所有表

    查找带有CLOB字段的以HEHE开头的所有表 select t.column_name ,DATA_TYPE,TABLE_NAMEfrom user_tab_columns twhere t.TABL ...

  2. JsonHelp

    using Newtonsoft.Json; using Newtonsoft.Json.Converters; using Newtonsoft.Json.Linq; using System; u ...

  3. MyBatis(1)优点&介绍&工程

    本次全部学习内容:MyBatisLearning 一:jabc的相关说明: jdbc编程步骤: 加载数据库驱动 创建并获取数据库链接 创建jdbc statement对象 设置sql语句 设置sql语 ...

  4. Java之生成Pdf并对Pdf内容操作

    虽说网上有很多可以在线导出Pdf或者word或者转成png等格式的工具,但是我觉得还是得了解知道是怎么实现的.一来,在线免费转换工具,是有容量限制的,达到一定的容量时,是不能成功导出的;二来,业务需求 ...

  5. 如何清理Macbook垃圾文件

    如何清理Macbook垃圾文件,腾出更多硬盘空间 在Macbook使用久之后,会发现本来还富裕的硬盘,变得越来越少,尤其现在Macbook使用容量很小的固态硬盘.在此种情况下,该如何清理Macbook ...

  6. Parallel.ForEach使用示例

    新建一个.NET Core控制台程序,代码如下: using System; using System.Collections.Generic; using System.Threading; usi ...

  7. Java中的IO流（四）

    上一篇<Java中的IO流(三)>把IO流中的文件及目录操作的对象File类记录了一下,本篇把本不属性IO流但又和IO流有关系的一个对象作一下记录,此对象本属于集合框架里的一个子集,即Pr ...

  8. oracle查询相关注意点

    单表查询: .or 和 and 混合使用 需求:查询业主名称包含'刘'或门牌号包含'5'的,并且地址编号为3的记录 and 的权限优先于 or 所以需要在or的两边添加() 2. 范围查询 除了传统的 ...

  9. 快速排序_c++

    快速排序_c++ GitHub 文解 快速排序正如其名,是一种排序速度较快的排序算法. 其核心思想: 取数组的第一个数,确定其在整个数组中的位置. 以刚刚的数值所确定的位置经数组分为两个部分. 再分别 ...

  10. module.exports与exports的联系与区别

    首先说明他们是啥? 在CommonJS规范中,exports和module.exports这两个对象是把某一模块化文件中的属性和方法暴露给外部模块的接口(说法可能不准确),外部模块通过require引 ...