js调用百度地图及调用百度地图的搜索功能
更新时间：2015年09月07日 09:59:15 投稿：mrr
本文给大家介绍js调用百度地图的方法以及调用百度地图的搜索功能，有需要的朋友可以跟着脚本之家的小编一起学习
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中的typeof其实非常复杂,他有六种返回的数据类型，它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了Javascript中的几种URL编码方法比较,本文对比了escape()、encodeURI()以及encodeURIComponent()这3种URL编码方法,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS onmousemove鼠标移动坐标接龙DIV效果实例，有需要的朋友可以参考一下2013-12-12
javascript中Date format(js日期格式化)方法小结
这篇文章主要介绍了javascript中Date format,即js日期格式化的方法.实例总结了三种常见的JavaScript日期格式化技巧,需要的朋友可以参考下2015-12-12
这篇文章主要为大家详细介绍了js控住DOM实现发布微博效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了js淡入淡出的图片轮播切换特效，图片可以随意替换，文中示例代码介绍的非常详细，具有一定的参考价值，推荐给大家，感兴趣的小伙伴们可以参考一下2015-08-08
在开发过程中会经常遇到window.open打开的页面，同时问题出现了如何刷新上层页面呢？本文将详细介绍，需要了解的朋友可以参考下2012-12-12
这篇文章主要介绍了JS ES新特性 扩展运算符，下面文章围绕ES新特性 扩展运算符的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助2021-12-12
本篇文章主要介绍了原生JS实现日历组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
使用onkeypress字符按键兼容所有浏览器，感兴趣的朋友可以参考下，希望对你学习js事件有所帮助2013-04-04
最新评论