百度地图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. 视图 b

  2. 关于js点击事件出现 xx is not defined at HTMLAnchorElement.onclick 的问题

    测试: html: <button onclick="abc();">点我点我!</button> js: function abc(){ alert(“1 ...

  3. StringJoiner

    示例一 public class StringJoinerTest1 { public static void main(String[] args) { StringJoiner joiner = ...

  4. CopyOnWriteArrayList介绍

    CopyOnWrite容器即写时复制的容器.通俗的理解是当我们往一个容器添加元素的时候,不直接往当前容器添加,而是先将当前容器进行Copy,复制出一个新的容器,然后新的容器里添加元素,添加完元素之后, ...

  5. TextView selector 在LinearLayout中获取焦点问题

    通常需要修改textview被选中时文字颜色,总是没效果,有以下几种方式可以实现: <?xml version="1.0" encoding="utf-8" ...

  6. 【转载】对C#DateTime的一些扩展,计算周内第一天，最后一天

    /// <summary> /// DateTime的一些扩展 /// </summary> public class DateTime2 { /// <summary& ...

  7. render 函数渲染表格的当前数据列使用

    columns7: [ { title: '编号', align: 'center', width: 90, key: 'No', render: (h, params) => { return ...

  8. Oracle数据库，简单SQL练习与答案

    1.数据 --创建职员表create table tbEmp( eID number primary key, --职员编号 eName varchar2(20) not null, --职员姓名 e ...

  9. Swift_属性

    Swift_属性 点击查看源码 class DataImporter { var fileName = "data.txt" init() { print("初始化&qu ...

  10. vue+element-ui中的图片获取与上传

    vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...