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 相关文章推荐
javascript 函数式编程
Aug 16 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 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
AM/FM收音机的安装与调试
2021/03/02 无线电
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP 引用文件技巧
2010/03/02 PHP
php 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
js实现简单扫雷
2020/11/27 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Python实现端口检测的方法
2018/07/24 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
python框架flask表单实现详解
2019/11/04 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Python flask框架端口失效解决方案
2020/06/04 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
音乐教学案例
2014/01/30 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
我的收音机情缘
2022/04/05 无线电