百度地图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. Swift3.0 调用C函数-_silen_name

    一般情况下Swit要想调用obj-c,c或c++代码必须通过obj-c以及桥接文件才可以办到,但是使用@_silgen_name,可以对于某些简单的代码,直接跳过桥接文件和.h头文件与C代码交互. 创 ...

  2. 转：git 的常用命令

    转自:阮一峰 常用git命令清单 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Wor ...

  3. ASP.NET Core 程序发布到Linux（Centos7）爬坑实战

    前言 前阶段弄了个Linux系统想倒腾倒腾.NET Core,结果看了下网上的资料,大部分都是过期的,走了不少弯路,不过还好,今下午总算捣鼓出来了.Linux命令太多了,唉.血的教训:安装一定要看官网 ...

  4. CPP-基础：临界区

    VC windows api 多线程---临界区 临界区(Critical Section)是一段独占对某些共享资源访问的代码,在任意时刻只允许一个线程对共享资源进行访问.如果有多个线程试图同时访问临 ...

  5. 以EF形式操作mysql数据库

    1.引入Nuget包: 2.书写EF操作上下文 public class MySqlContext:DbContext { protected override void OnConfiguring( ...

  6. springmvc错误集锦-dubbo包含低版本的spring包，依赖的时候应该排除Caused by: java.lang.reflect.MalformedParameterizedTypeException

    dubbo 常见错误 1. Caused by: java.lang.reflect.MalformedParameterizedTypeException 启动时报错,原因是dubbo 依赖 spr ...

  7. CToolBarCtrl工具栏设置总结（转）

    (一)工具条控制的主要功能 所谓工具条就是具有位图和分隔符组成的一组命令按钮,位图按钮部分可以是下推按钮.检查盒按钮.无线按 钮等.工具条对象类派生于主窗口架框类CframeWnd或CMDIFrame ...

  8. 让NSArray数组中每个对象都调用的方法

    1. [array valueForKey:@"title"]; //Returns an array containing the results of invoking val ...

  9. iOS中的应用启动原理

    iOS中的应用启动原理 来源: http://m.blog.csdn.net/article/details?id=50530090 http://m.warting.com/program/2016 ...

  10. Oracle子查询之简单子查询

    Oracle 简单子查询 顾名思义,简单子查询是嵌套在 SQL 语句中的另一个SELECT 语句,并且子查询只返回一列数据 1,单行子查询: 子查询 (内查询) 在主查询之前一次执行完成.子查询的结果 ...