代码示例　　

  1.  <html>
  2.  <head>
  3.      <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  4.      <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  5.      <script src="http://api.map.baidu.com/getscript?v=1.4&ak=&services=&t=20150522093217"></script>
  6.      <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&_=20150522093217"></script>
  7.      <title>百度地图API使用示例</title>
  8.      <style>
  9.      #mapContainer{
  10.          height:600px;
  11.          width:600px;
  12.          border:1px solid #eee;
  13.          }
  14.      div.top{
  15.            margin-bottom:10px;
  16.            }
  17.      #btn{
  18.            border:0px;
  19.            background-color:66B3FF;
  20.            height:30px;
  21.            color:#FFF;
  22.            }
  23.      </style>
  24.      </head>
  25.  <body>
  26.  <div class="top">
  27.      <span>输入地点：</span><input type="text" id="keyword" />
  28.      <button  onclick="searchAddress()" id="btn">搜索地址</button>
  29.      </div>
  30.  <div id="mapContainer">
  31.      </div>
  32.  </body>
  33.  <script>
  34.      var map;//百度地图实例
  35.      var local;
  36.      //创建经纬度方法
  37.      function createpoint(lon,lat){
  38.          return new BMap.Point(lon,lat);
  39.          };
  40.      function initMap(dom,point){
  41.          map = new BMap.Map(dom);
  42.          map.centerAndZoom(point,15);
  43.          map.enableScrollWheelZoom();
  44.          local = new BMap.LocalSearch(map,{renderOptions:{map: map}});
  45.          }
  46.       function searchAddress(){
  47.         var keyAddress = $("#keyword").val();
  48.         local.search(keyAddress);
  49.       }
  50.      $(function(){
  51.          var point = createpoint(116.404,39.915);
  52.          initMap("mapContainer",point);
  53.  
  54.          });
  55.      </script>
  56.  </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. eleemnt-ui修改主题颜色

    饿了吗的element-ui使用的是淡蓝色的主题,有时候我们可以自定义主题,官方的文档给我们提供了如何修改主题,介绍的很详细,自己试验过后,觉得很不错,一方面怕忘记,一方面写一写. 方法一是在线生成一 ...

  2. 史上最全python面试题详解（一）（附带详细答案（持续更新））

    1.简述解释型和编译型编程语言? 概念: 编译型语言:把做好的源程序全部编译成二进制代码的可运行程序.然后,可直接运行这个程序. 解释型语言:把做好的源程序翻译一句,然后执行一句,直至结束! 区别: ...

  3. 禁止chrome浏览器的缓冲图片以及css等资源文件

    今天做了一个动画的效果,在ff下正常 但是到了谷歌下就不正常了,非常郁闷,看了下是缓存的问题 ,于是度娘了一下发现清理缓存的技巧还是满多的,这里借鉴一下别人的总结,人的大脑有限,下次忘记的时候还可以在 ...

  4. 0.3：Before We Start

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 需要做的准备 首先肯定是需要安装Unity,我这里选择的版本是Unity ...

  5. Docker Swarm 高可用详解

    Docker Swarm 高可用详解 Manager管理节点宕机后其他管理节点仍然可以使用管理 intermal distributed state store:内部分布式状态存储同步共享到每个节点. ...

  6. 【Python65--tkinter:button】

    一.需求:在Label页面增加一个按钮,点击此按钮,页面内容进行变化 思路: 1.上面放一个Label,下面放一个Button 2.采用frame框架 from tkinter import * #定 ...

  7. Oracle使用——oracle复制表

    复制表结构和数据 create table table_name_new as select * from table_name_old; 复制表结构 ; 复制表数据(全量插入数据) 两个表结构相同 ...

  8. centos6.5下安装Redis

    已有redis-3.2.1.tar.gz文件 拖到centos系统的桌面 现在在桌面目录下 tar -zxv -f redis-3.2.1.tar.gz以解压压缩包 cd redis-3.2.1以切换 ...

  9. Not supported for DML operations

    问题原因 缺失@Modifying注解 问题解决 在自定义的修改方法(delete.update)上面除了@Transactional注解和@Query还需要@Modifying注解 Bug重现 or ...

  10. 7、zabbix使用进阶(03)

    节知识点: zabbix自动发现 web监控 zabbix自动发现   官网:https://www.zabbix.com/documentation/4.0/zh/manual/discovery/ ...