实现代码：

<!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. 【Zhejiang University PATest】02-1. Reversing Linked List

    Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elem ...

  2. APP推广入门之AppStore数据分析

    AppStore中有很多数据,但对于一个App推广者而言,最需要关注的无非这么几个,即下载量.评论.权重.榜单排名.搜索排名以及热词搜索等.至于这些数据具体代表着什么,下面就先由下载量开始,来简单介绍 ...

  3. HDU 4460

    http://acm.hdu.edu.cn/showproblem.php?pid=4460 水题一道,oj时间卡的非常奇怪,把spfa的queue开成全局卡线过,别的全挂了,迪杰斯特拉的手写堆都超时 ...

  4. Magento控制器

    提到模型-视图-控制器这种MVC架构,要追溯到Smalltalk编程语言和Xerox Parc.从那个时候开始,就有许多系统将自己描述为MVC架构.这些系统虽然在某些地方有细微差别,但都实现了数据层, ...

  5. 《JavaScript Ninja》之闭包

    闭包 闭包是什么,它们是如何工作的 闭包 是一个函数在创建时允许该自身函数访问并操作该自身函数之外的变量时所创建的作用域. 即:闭包可以让函数访问所有的变量和函数,只要这些变量和函数存在于该函数声明时 ...

  6. Xen虚拟机磁盘镜像模板制作(三)—CentOS 7

    这里整理下制作Xen CentOS 7磁盘镜像模版的流程: 1.创建一个将要用来安装CentOS 7系统的LV,命令如下: [root@localhost ~]# lvcreate -L 5G -n ...

  7. editplus 常用快捷键汇总 大小写代码折叠

    文本类 新建普通文本:Ctrl+N新建浏览器窗口:Ctrl+Shift+B新建HTML页:Ctrl+Shift+N打开:Ctrl+O打开一个现有的文档文件结尾:Ctrl+End选区扩展到文档结尾处:C ...

  8. DISCOVAR de novo

    海宝建议用这个拼接软件 http://www.broadinstitute.org/software/discovar/blog/?page_id=98 DISCOVAR – variant call ...

  9. pyvcf 模块

    最近一直在处理samtools freebayes gatk 产生的snp数据, 结果文件都是vcf,于是自己就写了相应的类,但是总是不够完善. 海宝推荐这个模块,他都推荐了 我还抱着我那烂代码不放干 ...

  10. （实用篇）微信网页授权(OAuth2.0) PHP 源码简单实现

    提要: 1. 建议对OAuth2.0协议做一个学习. 2. 微信官方文档和微信官网工具要得到充分利用. 比较简单,直接帖源代码了.其中"xxxxxxxxxx"部分,是需要依据自己环 ...