代码示例　　

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

     <script src="http://api.map.baidu.com/getscript?v=1.4&ak=&services=&t=20150522093217"></script>

     <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&_=20150522093217"></script>

     <title>百度地图API使用示例</title>

     <style>

     #mapContainer{

         height:600px;

         width:600px;

         border:1px solid #eee;

         }

     div.top{

           margin-bottom:10px;

           }

     #btn{

           border:0px;

           background-color:66B3FF;

           height:30px;

           color:#FFF;

           }

     </style>

     </head>

 <body>

 <div class="top">

     <span>输入地点：</span><input type="text" id="keyword" />

     <button  onclick="searchAddress()" id="btn">搜索地址</button>

     </div>

 <div id="mapContainer">

     </div>

 </body>

 <script>

     var map;//百度地图实例

     var local;

     //创建经纬度方法

     function createpoint(lon,lat){

         return new BMap.Point(lon,lat);

         };

     function initMap(dom,point){

         map = new BMap.Map(dom);

         map.centerAndZoom(point,15);

         map.enableScrollWheelZoom();

         local = new BMap.LocalSearch(map,{renderOptions:{map: map}});

         }

      function searchAddress(){

        var keyAddress = $("#keyword").val();

        local.search(keyAddress);

      }

     $(function(){

         var point = createpoint(116.404,39.915);

         initMap("mapContainer",point);

         });

     </script>

 </html>

官方参考文档： http://lbsyun.baidu.com/index.php?title=jspopular

百度地图JSSDK使用小实例的更多相关文章

  1. 解决Vue引入百度地图JSSDK：BMap is undefined 问题

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...

  2. 百度地图Api进阶教程-实例高级操作8.html

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

  3. 百度地图和echarts结合实例

    1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接 ...

  4. 百度地图API 级别自动缩放

    今天做一个基于百度地图API的小项目 查了很长时间apid都没有找到地图呈现出来的时候地图按坐标的多少自动缩放显示的等级比例,特此记录笔记!var points = [point1, point2,p ...

  5. 百度地图 JavaScript API

    最近有点懒  项目结尾了  完了好长时间 没有去总结项目中的问题 想了下还是写写吧 这是一个关于百度地图的 网页展示 <!DOCTYPE html><html><head ...

  6. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  7. JavaScript动态加载script方式引用百度地图API，Uncaught ReferenceError: BMap is not defined

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 实际工作场景中仅某一两个页面或者只是单纯有功能需要用到百度地图,所以没有必要在 index.html 中全局引 ...

  8. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]

    相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...

  9. 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例

    百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...

随机推荐

  1. JAVA JDK 环境变量配置--简单图解

    Linux下的Jmeter运行测试 本文主要介绍Jmeter脚本如何在Linux通过no GUI的方式运行.总共分三部分: 1.Linux下JDK的安装及环境变量的配置 2.Linux下Jmeter的 ...

  2. L1-049. 天梯赛座位分配

    天梯赛每年有大量参赛队员,要保证同一所学校的所有队员都不能相邻,分配座位就成为一件比较麻烦的事情.为此我们制定如下策略:假设某赛场有 N 所学校参赛,第 i 所学校有 M[i] 支队伍,每队 10 位 ...

  3. Android组件系列----Intent详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  4. vivado 创建PS工程

    前言 本文简要介绍在vivado中创建PS工程.单纯使用zynq芯片的PS部分就像使用普通ARM芯片一样,只是多了建立Zynq硬件系统这一个步骤.vivado创建PL工程参见此处 新建工程 与viva ...

  5. Vue：（一）概况

    Vue:https://cn.vuejs.org/ (一)Vue概况 Vue本身并不是一个框架 Vue结合周边生态构成一个灵活的.渐进式框架 声明式渲染 组件系统 客户端路由 状态管理 构建工具 (二 ...

  6. CentOS7设置阿里镜像

    1. 备份原来的yum源 sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak 2.设置ali ...

  7. jmeter+influxdb+grafana性能测试监控

    背景: 话说Jmeter原生的监控确实太丑了,听大佬们在讨论Jmeter+InfluxDb+Grafana的监控,于是,为了有一个漂亮的测试报告,就手动开始进行部署. 安装步骤: 1.influxdb ...

  8. 短路运算符（逻辑与&& 和 逻辑或||）

    首先我们来解释一下短路运算符: 短路运算符就是从左到右的运算中前者满足要求,就不再执行后者了: 可以理解为: &&为取假运算,从左到右依次判断,如果遇到一个假值,就返回假值,以后不再执 ...

  9. 更改npm淘宝源，并设置cnpm

    一.通过命令配置1. 命令 npm config set registry https://registry.npm.taobao.org2. 验证命令 npm config get registry ...

  10. vue分页控件

    下载:https://pan.baidu.com/s/1c125Vgc 一个简单的分页控件: 自动加载模式: 手动加载模式: loading图标使用了iconfont: 主要方法: beginRefr ...