百度地图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. Hibernate双向一对多、双向多对多关联关系中的映射文件怎么写

    这里以一对多关联关系为例.以Country类为一端,Competition类为多端. 一个国家可以有多个赛事,但是一个赛事只能属于一个国家. Country类 public class Country ...

  2. matlab中boxplot字体大小设置

    网上找到的:set(findobj(gca,'Type','text'),'FontSize',18) boxplot() uses the default axes labeling for the ...

  3. 【题解】洛谷P1120 小木棍（搜索+剪枝+卡常）

    洛谷P1120:https://www.luogu.org/problemnew/show/P1120 思路 明显是搜索题嘛 但是这数据增强不是一星半点呐 我们需要N多的剪枝 PS:需要先删去超出50 ...

  4. GPIO 配置示例

    概述:学习STM32的GPIO configration /********************************************************************** ...

  5. 用http.get()简单实现网络验证防止客户不给尾款_电脑计算机编程入门教程自学

    首发于:用http.get()简单实现网络验证防止客户不给尾款_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=428 给软 ...

  6. 算法基础-dfs

    最近在学dfs(深度优先搜索),dfs与树的遍历差不多,就是先从一个点开始一直搜索,直到走不动为止.现在推荐一个简单的dfs题, 百炼的2815, ########################## ...

  7. 使用泛型与不使用泛型的Map的遍历

    https://www.cnblogs.com/fqfanqi/p/6187085.html

  8. C#的哈希表Hashtable同步方法

    在多线程环境的操作中对Hashtable进行操作需要进行同步控制,有两种方法,一种是由.Net自动控制:一种是在代码中自己控制. 1.使用Hashtable.Synchronized进行同步 Hash ...

  9. 使用TryParse()来执行数值转换

    static void Main() { var ageText = "25"; if (int.TryParse(ageText,out int age)) { Console. ...

  10. spark成长之路（1）spark究竟是什么？

    今年6月毕业,来到公司前前后后各种事情折腾下来,8月中旬才入职.本以为终于可以静下心来研究技术了,但是又把我分配到了一个几乎不做技术的解决方案部门,导致现在写代码的时间都几乎没有了,所以只能在每天下班 ...