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 相关文章推荐
jquery 学习之二 属性相关
Nov 23 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
JS作用域链详解
Jun 26 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
详解React中setState回调函数
Jun 14 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
微信小程序实现带放大效果的轮播图
May 26 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
一个程序下载的管理程序(四)
2006/10/09 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
php实现图片添加描边字和马赛克的方法
2014/12/10 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
python使用scrapy解析js示例
2014/01/23 Python
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
python生成指定尺寸缩略图的示例
2014/05/07 Python
python单例模式实例分析
2015/04/08 Python
MySQL最常见的操作语句小结
2015/05/07 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python中return的返回和执行实例
2019/12/24 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
大三学生入党思想汇报
2014/01/02 职场文书
致裁判员加油稿
2014/02/08 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
受资助学生感谢信
2015/01/21 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python