代码示例  

 <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线程学习之线程创建

    线程是程序控制的一个内部数据流.线程的状态转化如下 或者 在java中创建线程有两种方式: 1.实现runnable接口(这个比较好,推荐这个.原因是:用的时候比较灵活,相比较继承Thread类,用接 ...

  2. saltstack 基本的批量操作

    centos 6.5 saltstack 2015.5.10 (Lithium) 基本用法 # salt 'DEV-APP-001' cmd.run 'hostname' #指定被控端 # salt ...

  3. 系统安装后的linux和vmware的网络配置

    一.1表示linux的版本   2表示linux内核的版本   3表示操作系统多少位  4.表示操作系统的名称 二.配置虚拟机网络 1.在办公室控制和使用服务器(机房) 2.远程连接 ###配置虚拟机 ...

  4. Netbeans and Remote Host for C/C++ Developing

    Netbeans and Remote Host for C/C++ Developing 很久以来,因为我不适应在 Linux 下使用 Vim, GCC, GDB 开发 C/C++ 程序,所以我一直 ...

  5. 剑指offer(1)二维数组的查找

    限制今天起开始也刷剑指offer啦,一步一步来. 题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数, ...

  6. Arch Linux安装后的一些初始设置简介

    配置有线网络. 没网络的时候,可以直接设定ip应急,后面 netctl 才是正规设置: # ip addr add 192.168.0.100/24 dev enp0s4# ip link set d ...

  7. 使用Log4j2实现日志输出

    一.说明 如果是使用slf4j规范的,请先引用: <!-- https://mvnrepository.com/artifact/org.apache.logging.log4j/log4j-s ...

  8. 构建oracle12c的Docker镜像

    1. 准备工作 需要下载oracle相关的东东,例如安装文件,dockerfile.这些都可以从oracle 的github 上面找到.https://github.com/oracle/docker ...

  9. React文档(十三)思考React

    在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...

  10. 【PAT】我要通过!

    “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于PAT的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: 1 ...