百度地图搜索功能的实现

适用任何语言

效果图：

HTML代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>百度地图搜索</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8d867483baeaffd7f85b1ee099aee919"></script>
</head>
<body><form id="form1" runat="server"><table style="width: 1024px; height: 700px;" align="center"><tr><td style="width: 10%" >搜索地址：</td><td style="width: 90%" ><input id="suggestId" type="text" style="width: 70%"/><div id="searchResultPanel" style="border: 1px solid #C0C0C0; width: 150px; display: none;"></div></td></tr><tr><td colspan="2"><div id="bdmap" style="width: 100%; height: 600px;"></div></td></tr></table></form><script src="js/bdmap.js" type="text/javascript"></script>
</body>
</html>

bdmap.js

// 百度地图API功能
var map = new BMap.Map("bdmap");
//百度地图使用api接口key
var ak = "8d867483baeaffd7f85b1ee099aee919";//关键字检索
function G(id) {return document.getElementById(id);
}map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
function showInfo(e){//alert(e.point.lat + ", " + e.point.lng);//点击后显示地理信息var lo = +e.point.lat + "," + e.point.lng;//ajax调用百度地图apijQuery.ajax({type: "get",dataType: "jsonp",url: "http://api.map.baidu.com/geocoder/v2/?location=" + lo + "&output=json&ak=8d867483baeaffd7f85b1ee099aee919",success: function (data) {//alert(data.result.city);//$('#city').text(data.toJSONString().parseJSON().status);var address = data.result.addressComponent;jQuery('#province').val(address.province);jQuery('#city').val(address.city);jQuery('#country').val(address.district);var s = address.street + address.street_number;//alert(data.result.sematic_description);s += data.result.sematic_description;jQuery('#add_detail').val(s);jQuery('#location').val(data.result.location.lat + "," + data.result.location.lng);}});
}
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){currentPonit = r.point;isLocated = true;map.centerAndZoom(r.point,14);map.panTo(r.point);// 创建地理编码实例var myGeo = new BMap.Geocoder();// 根据坐标得到地址描述myGeo.getLocation(r.point, function(result){if (result){currentAddress = result.address;}});}else{alert("定位失败："+this.getStatus());}
},{enableHighAccuracy: true});map.addEventListener("click", showInfo);
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放var ac = new BMap.Autocomplete(    //建立一个自动完成的对象{"input" : "suggestId","location" : map
});ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;}    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;}    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;G("searchResultPanel").innerHTML = str;
});var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
var _value = e.item.value;myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;setPlace();
});
function setPlace(){map.clearOverlays();    //清除地图上所有覆盖物function myFun(){var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp));    //添加标注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);
}

友情链接：

ASP.NET Razor篇

ASP.NET MVC零基础自学篇：（一）ASP.NET MVC简介

C#将Excel表格内容导入数据库–ASP.NET MVC

JQuery ajax 实现关闭弹窗，刷新列表

ASP.NET MVC的 Action跳转方法归纳部分

jQuery实现checkbox多选，单选与数据库交互传值，赋值整理

C# String字符串方法的使用归纳(直观，粗暴)

百度地图搜索功能的实现相关推荐

vue-baidu-map百度地图搜索功能，点击进行标点，获取经纬度坐标，百度地图使用黑色主题
下载依赖 <template><div class="bDiv"><baidu-mapclass="bm-view":center ...
百度地图搜索功能的实现--new BMap.LocalSearch
let local = new BMap.LocalSearch(map, {renderOptions: {map: map,},onSearchComplete: (res) => {if ...
Python 爬取百度地图搜索结果
Python 爬取百度地图搜索结果第一次发CSDN = = 其实是因为以前实在没实现过什么像样的东西 emmm *就当是学习记录吧~ 还有很多不足,希望大家能在评论区指正呀大二的小白会继续努力的 ...
百度地图搜索关键字总集
百度地图搜索关键字: 百度Map关键字搜索圆形覆盖物转载地址:http://www.cnblogs.com/milkmap/archive/2011/09/16/2178907.html [百 ...
百度地图(二) - 模仿百度地图搜索框
百度地图(二) - 模仿百度地图搜索框 1 模仿百度地图搜索框 1 在activity_Main在添加 TextView <TextView android:id="@+id/tvSe ...
解决百度地图搜索框在底层显示不出来
/*解决百度地图搜索框在底层显示不出来*/ 官方出的补丁,把这个放在html顶端即可 <style type="text/css"> .tangram-suggesti ...
Android百度地图悬浮窗样式,JS百度地图搜索悬浮窗功能
效果图: 代码 body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;} # ...
JS实现百度地图搜索悬浮窗功能
百度了好多篇文章,发现这个是最有用的,复制下来之后,可以改地址,修改"北京"为你想要的地址就好了,搜索框输入你想要查找的地址,然后会联想出相关地址,点击就可以直接定位到了,超级好用 ...
iOS---搜索功能
1.iOS--- UITableView + UISearchDisplayController 实现搜索功能 2.iOS---iOS9(通过CoreSpptligt API)实现搜索功能转载于:h ...

百度地图搜索功能的实现

效果图：

HTML代码

bdmap.js

友情链接：

百度地图搜索功能的实现相关推荐

最新文章

热门文章