实现代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=e3ZohdqyB0RL98hFOiC29xqh"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
}
//创建地图函数:
function createMap(){
var map = new BMap.Map("BaiduDitu");//在百度地图容器中创建一个地图
map.centerAndZoom('上海',11);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数:
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
$(function(){
initMap();//创建和初始化地图
createSearch();
createAutocomlete();
$("#s_p_search_btn").click(function () {
searchPlace($("#searchplace").val());
});
});
function createSearch() {
var map = window.map;
var local = new BMap.LocalSearch(map,
{
renderOptions: { map: map, panel: "searchlist" }
});
window.local = local;
}
//搜索
function searchPlace(value) {
window.local.search(value);
}
function createAutocomlete() {
var map = window.map;
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{
"input": "searchplace",
"location": map
});
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
var addr =_value.business+ _value.province + _value.city + _value.district + _value.street + _value.streetNumber ;
searchPlace(addr);
});
}
</script>
</head>
<body class="easyui-layout">
<div class="Ditumap">
<div style="margin-bottom:10px;">
<input id="searchplace" style="width: 550px;" class="easyui-textbox-simple" placeholder="输入搜索关键字" />
<a id="s_p_search_btn" href="#" class="easyui-linkbutton" style="width: 80px;" iconcls="icon-search">搜索</a>
</div>
<div id="searchlist" style="width: 350px; height: 460px; margin-right:10px; float:left;"></div>
<div style="width:600px;height:460px;border:none; float:left;" id="BaiduDitu"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>

浏览器显示结果:

js调用百度地图API创建地图,搜索位置的更多相关文章

  1. js调用百度地图API创建地图

    技术交流群:233513714 <html xmlns="http://www.w3.org/1999/xhtml"><head runat="serv ...

  2. HTML5结合百度地图API创建地图应用

    具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid ...

  3. Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码

    (从我的新浪博客上搬来的,做了一些修改.) 最近迷上了node.js以及JavaScript.现在接到一个活,要解析一个出租车点位数据的地理信息.于是就想到使用Node.js调用百度地图API进行解析 ...

  4. js调用百度地图接口

    原文:js调用百度地图接口 这是前几天公司做的新项目,上面需要用到地图的数据.第一次做这类型的东西没啥思路,咱们经理说,这东西简单,截个图存文件夹里调整好尺寸,数据库里存上图片的地址动态调用就行了.心 ...

  5. 关于百度地图API的地图坐标转换问题

    原文:关于百度地图API的地图坐标转换问题 我在之前的文章利用html5获取经纬度并且在百度地图中显示位置中使用了百度地图的API来显示html5获取的地理位置,在文中我说过这样的话,我说百度地图的准 ...

  6. 网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

    在网页中插入百度地图 如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/ ...

  7. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  8. 百度地图API自定义地图

    http://api.map.baidu.com/lbsapi/creatmap/index.html http://developer.baidu.com/map/index.php?title=w ...

  9. Python 调用百度翻译API

    由于实习公司这边做的是日文app,有时要看看用户反馈,对于我这种五十音图都没记住的人,表示百度翻译确实还可以.但不想每次都复制粘贴啊,google被墙也是挺蛋疼的事,所以用python结合baidu ...

随机推荐

  1. (转)iOS消息推送机制的实现

    原:http://www.cnblogs.com/qq78292959/archive/2012/07/16/2593651.html iOS消息推送机制的实现 iOS消息推送的工作机制可以简单的用下 ...

  2. Interview----将一棵二叉树转换成其镜像

    题目:输入一颗二元查找树,将该树转换为它的镜像, 即在转换后的二元查找树中,左子树的结点都大于右子树的结点. 用递归和循环两种方法完成树的镜像转换. 例如输入:        8      /    ...

  3. Hello Qt

    版本:Qt 5.5.1 Windows 参考: C++ GUI Programming with Qt 4 Second Edition 1. 打开 Qt Creator,File -> New ...

  4. 看了这篇文章,Java编程速度我都惊呆了

    熟记于心,打遍天下,(开始装了) 保存 Ctrl+s                    (这个就不用解释了吧!!!!) 注释代码 Ctrl+/ 取消注释 Ctrl+/代码辅助 Alt+/ 快速修复 ...

  5. 【转】终于干了点正事。。三天用了三个库opencv、emgu、aforge.net[2011.7.30]

    原文转自: http://blog.csdn.net/tutuguaiguai0427/article/details/6646051 这阵子,确切说这几天,还是看了好多东西的.虽然无用功居多. 上篇 ...

  6. DBImg: 图片文件-二进制文件的转换

    using System; using System.IO; using System.Drawing; //using System.Collections.Generic; //using Sys ...

  7. iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例)

    iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例) 实现了以下iOS页面间传值:1.委托delegate方式:2.通知notific ...

  8. Day03_JAVA语言基础第三天

    1.位运算符 1.面试题(掌握) ^:一个数据对同一个数据^两次,结果还是数据本身 举例:a ^ b ^ b = a  2.注意 知道结论,面试题,以后就完全不用看了 2.逻辑运算符(掌握)     ...

  9. 移动开发中使用Onsen UI的笔记

    onsen var m_index = ons.bootstrap() 初始化框架 m_index 赋值 增加对象. m_index.value('getUser',{ // user:window. ...

  10. Javascript模块化编程(二):AMD规范【转】

    作者: 阮一峰 日期: 2012年10月30日 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为 ...