<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>百度地图api简单应用集合-powered by WangXinsheng</title>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script src='http://code.jquery.com/jquery-1.11.2.min.js'></script>
</head>
<style>
body, html,#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
font-family:"微软雅黑";
}
body{
margin:10px 5px;
}
#allmap{
width: 500px;
height: 400px;
margin: auto;
}
#opp{
position:relative;
top:-400px;
width:230px;
height:400px;
left:0px;
z-index:99;
overflow:hidden;
}
/*#opp div{min-width:150px;max-width:230px;overflow:hidden;}*/
#result{
position:relative;
top:0px;
left:0px;
z-index:90;
height:350px;
background:rgba(255,255,255,0.8);
overflow-y:auto;
overflow-x:hidden;
}
#result ul {padding:0px;margin:0px;}
#result ul{
list-style:none;margin-top:0px;margin-bottom:0px;
}
#result li{display:block;cursor:pointer;min-width:150px;width:230px;overflow:hidden;margin-top:5px;}
#result li:hover{background:#C6EEC6;}
.liName{font-size:12px;}
.liAdd{font-size:10px;color:gray;}
#result li:hover{background:#C6EEC6;}
#showR{
font-size:13px;
color:blue;
cursor:pointer;
}
</style>
<body>
<div id="allmap"></div>
<div id="opp">
<div>
<input id='wxsSearch' type='text' org='wxs' value='' placeholder='请输入地址' />
<input id='wxsDoSearch' type='button' org='wxs' value='搜索' />
<br /><span id='showR'></span>
</div>
<div id='result'>
</div>
</div>
</body>
<script type="text/javascript">
var mapClick = {'lng':'','lat':''};
var map;
$(function(){
$('#opp').css('left',$('#allmap').offset().left+"px");
$('#result').hide();
$("#opp").height(50);
loadJScript(); //异步加载地图
})
function myFun(result){
var cityName = result.name;
//alert("当前定位城市:"+cityName);
$("#wxsSearch").val(cityName);
if(cityName!="全国" && cityName!=""){
map.setCenter(cityName);
$("#wxsDoSearch").click();
}
}
//百度地图API功能
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=yW4S1ZIFFRGfGv1PwYc8ZIHB&callback=onMapLoaded";
document.body.appendChild(script);
}
function onMapLoaded() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js";
document.body.appendChild(script);
map = new BMap.Map("allmap"); // 创建Map实例
//var point = new BMap.Point(116.404, 39.915); // 创建点坐标
//map.centerAndZoom(point,15);
map.centerAndZoom("上海",15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addEventListener("click", function(e){
//alert(e.point.lng + ", " + e.point.lat);
mapClick = {'lng':e.point.lng,'lat':e.point.lat};
$("#result").hide();
$("#opp").height(50);
//console.log(mapClick);
});
$("#wxsSearch").click(function(e){/*alert('a');*/$("#result").show();$("#opp").height(400);});
$("#showR").click(function(e){
if($("#result").is(":hidden")){
$("#result").show();$("#opp").height(400);
}else{
$("#result").hide();
$("#opp").height(50);
}
});
var ac1 = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : "wxsSearch"
,"location" : map
});
ac1.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
//console.log(myValue);
$("#wxsSearch").val(myValue);
});
$('#wxsDoSearch').click(function(){
$("#result").html('').show();$("#opp").height(400);
var options = {
onSearchComplete: function(results){
//console.log('complete',local.getStatus(),BMAP_STATUS_SUCCESS);
// 判断状态是否正确
if (local.getStatus() == BMAP_STATUS_SUCCESS){
//var s = [];
var ulStr="<ul>";
for (var i = 0; i < results.getCurrentNumPois(); i ++){
var liStr = "<li onclick='doFindPL(this);' lat='%lat%' lng='%lng%'><span class='liName'>%title%</span><br /><span class='liAdd'>%address%</span></li>";
liStr=liStr.replace(/\%lat%/g,results.getPoi(i).point.lat);
liStr=liStr.replace(/\%lng%/g,results.getPoi(i).point.lng);
liStr=liStr.replace(/\%title%/g,results.getPoi(i).title);
ulStr+=liStr.replace(/\%address%/g,results.getPoi(i).address);
//console.log(results.getPoi(i));
//s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
}
ulStr+= "</ul>";
//console.log(ulStr);
$("#result").html(ulStr);
//document.getElementById("r-result").innerHTML = s.join("<br/>");
//console.log(s.join("<br/>"));
}
}
};
var local = new BMap.LocalSearch(map, options);
/*var local = new BMap.LocalSearch(map, {
renderOptions:{map: map}
});*/
//console.log('doSearch');
local.search($('#wxsSearch').val());
});
var myCity = new BMap.LocalCity();
myCity.get(myFun);
setInterval(removeBD,100);
}
function doFindPL(thisObj){
//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, '地址：'+$($(thisObj).find(".liAdd")[0]).html(), {
title : $($(thisObj).find(".liName")[0]).html(), //标题
//width : 290, //宽度
//height : 105, //高度
panel : "result", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
//var poi = new BMap.Point($(thisObj).attr('lat'),$(thisObj).attr('lng'));
var poi = new BMap.Point($(thisObj).attr('lng'),$(thisObj).attr('lat'));
var marker = new BMap.Marker(poi); //创建marker对象
//marker.enableDragging(); //marker可拖拽
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
});
map.clearOverlays();
map.addOverlay(marker); //在地图中添加marker
map.panTo(poi);
mapClick.lng=$(thisObj).attr('lng');
mapClick.lat=$(thisObj).attr('lat');
}
function removeBD(){
//<input type="text" id="tangram-suggestion--TANGRAM__2x-input" autocomplete="off" style="height: 22px; line-height: 22px; padding: 0px; margin: 0px; border: 1px solid rgb(165, 172, 178); width: 85px;">
$("input[org!=wxs][type=text]").each(function(index){
if($(this).attr("id")!=undefined)return;
var id="suggestId"+new Date().getTime();
var replaceBtn = "<input id='"+id+"' type='text' value='' style='"+
$(this).attr("style")+"' org='wxs' width='"+$(this).width()+"px'>";
$(this).parent().append($(replaceBtn));
$(this).remove();
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : id
,"location" : map
});
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
//console.log(myValue);
$("#"+id).val(myValue);
});
});
$("input[org!=wxs][type=button]").each(function(index){
if($(this).attr("id")!=undefined)return;
var valueBtn="";
if($(this).attr("value")=="导航")
{
valueBtn = "步行";
}else{
valueBtn = $(this).attr("value");
}
var replaceBtn = "<input type='button' valu
[JS,API,MAP]百度地图api简单功能应用集合
5星 · 超过95%的资源 需积分: 16 2 浏览量
2015-01-31
13:07:16
上传
评论 4
收藏 4KB RAR 举报 
baiduMap.rar （1个子文件） 
baiduMap 
map.html 13KB资源评论
hxlzyl2016-09-09很实用，给力
qq_320623872015-10-16挺好用的，可以用用- qq_238678932017-12-11还可以吧，看看再说
huaziqq2015-08-15资源好赶紧下
