js调用百度地图及调用百度地图的搜索功能


Posted in Javascript onSeptember 07, 2015

js调用百度地图的方法

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Hello, World</title>
 <style type="text/css">
  html
  {
   height: 100%;
  }
  body
  {
   height: 50%;
   margin: 0px;
   padding: 0px;
  }
  #container
  {
   width:600px;
   height: 500px;
  }
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body onload="loand()">
 <div id="container">
 </div>
 <input id="lng" type="hidden" runat="server" />
 <input id="lat" type="hidden" runat="server" />
 <input id="Button1" type="button" value="标记图标" runat="server" onclick="getbiaoji()" />
 <script type="text/javascript">
  function getbiaoji() {
   var lng = document.getElementByIdx_x("lng").value;
   var lat = document.getElementByIdx_x("lat").value;
   var map = new BMap.Map("container");
   var point = new BMap.Point(lng, lat);
   var marker = new BMap.Marker(point);
   var opts = {
    width: 250,  // 信息窗口宽度 
    height: 100,  // 信息窗口高度 
    title: "经销商地址" // 信息窗口标题 
   }
   var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址:" + lng + lat, opts); // 创建信息窗口对象
   marker.enableDragging(); //启用拖拽
   map.addControl(new BMap.NavigationControl()); //左上角控件
   map.enableScrollWheelZoom(); //滚动放大
   map.enableKeyboard(); //键盘放大
   map.centerAndZoom(point, 13); //绘制地图
   map.addOverlay(marker); //标记地图
   map.openInfoWindow(infoWindow, map.getCenter());
  }
  function loand() {
   var map = new BMap.Map("container");
   var point = new BMap.Point(104.083, 30.686); //默认中心点
   var marker = new BMap.Marker(point);
   var opts = {
    width: 250,  // 信息窗口宽度 
    height: 100,  // 信息窗口高度 
    title: "经销商地址" // 信息窗口标题 
   }
   var infoWindow = new BMap.InfoWindow("移动拖拽 标记经销商地址", opts); // 创建信息窗口对象
   marker.enableDragging(); //启用拖拽
   marker.addEventListener("dragend", function (e) {
    point = new BMap.Point(e.point.lng, e.point.lat); //标记坐标(拖拽以后的坐标)
    marker = new BMap.Marker(point);
    document.getElementByIdx_x("lng").value = e.point.lng;
    document.getElementByIdx_x("lat").value = e.point.lat;
    infoWindow = new BMap.InfoWindow("当前位置<br />经度:" + e.point.lng + "<br />纬度:" + e.point.lat, opts);
    map.openInfoWindow(infoWindow, point);
   })
   map.addControl(new BMap.NavigationControl()); //左上角控件
   map.enableScrollWheelZoom(); //滚动放大
   map.enableKeyboard(); //键盘放大
   map.centerAndZoom(point, 13); //绘制地图
   map.addOverlay(marker); //标记地图
   map.openInfoWindow(infoWindow, map.getCenter());  // 打开信息窗口  
  }
 </script>
</body>
</html>

js调用百度地图搜索

引用百度js Api

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxx"></script>

创建地址解析器:

var localSearch = null;
//查询参数
var options = {
   //智能搜索
   onSearchComplete: function (results) {
    //查询结果状态码
    if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {
     var s = convertMapSearch(results); //对结果进行处理
     model.locationAddress(s); //将结果数据赋予knockout对象数组(可用其他数组对象代替)
    }
   }
  };
  localSearch = new BMap.LocalSearch("城市", options);

结合knockout的textInput绑定方法和对象的subscribe属性,实现输入框变化实时查询功能。

//绑定
<input id="txtAddress" type="text" placeholder="请输入用餐地址" data-bind="textInput: addressInput" />
//subscribe属性 在输入变化的时候执行地址查询
sf.addressInput.subscribe(function (val) {
   var addr = $.trim(val);
   if (addr == "") {
    return;
   }
   localSearch.search(addr);
  });

以上就是三水点靠木的小编给大家分享的js调用百度地图及调用百度地图的搜索功能,有关更多关于百度地图相关内容,请持续关注本站,本站没有都有新的内容更新。

Javascript 相关文章推荐
java script编程起步(第三课)
Jan 10 Javascript
javascript 事件绑定问题
Jan 01 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 #Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 #Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 #Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 #Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 #Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 #Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 #Javascript
You might like
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
[原创]图片分页查看
2006/08/28 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
python实现计算图形面积
2021/02/22 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
技校教师求职简历的自我评价
2013/10/20 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
自我评价范文
2013/12/22 职场文书
业绩考核岗位职责
2014/02/01 职场文书
担保书格式及范文
2014/04/01 职场文书
三方协议书范本
2014/04/22 职场文书
见习报告格式要求
2014/11/04 职场文书
2015年妇女工作总结
2015/05/14 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
python+opencv实现目标跟踪过程
2022/06/21 Python