在最近项目中，我接触了百度地图的api写法，对其中的代码有了一点兴趣，所以我在完成任务后，在办公室里学习了百度地图的相关引用，并申请了服务秘钥： e7pcho0sv3fdzmjc901ttp0hrs9bt4ny
下面是我在学习中总结的对项目有帮助的代码
我要评论<!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>
<script type="text/javascript" src="jquery1.7.2.js"></script>
<script type="text/javascript" src="map.jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=e7pcho0sv3fdzmjc901ttp0hrs9bt4ny"></script>
</head>
<body>
<div class="bmap" style="width:500px;height: 500px;margin:auto;padding-top:100px;">
<table>
<td>
<div id="r-result"><input type="text" name="address" id="suggestid" size="20" datatype="*" value="" style="width:400px;margin-bottom: 5px;padding:3px" /></div>
<input type="hidden" name="address_lat" id="address_lat" value=""/>
<input type="hidden" name="address_lng" id="address_lng" value=""/>
<div id="searchresultpanel" style="border:1px solid #c0c0c0;width:150px;height:auto; display:none;"></div>
<div id="l-map" style="width:400px;height: 400px;"></div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
// 百度地图api功能
function g(id) {
return document.getelementbyid(id);
}
var map = new bmap.map("l-map");
var point = new bmap.point(116.331398,39.897445);
map.centerandzoom(point,14);
function myfun(result){
var cityname = result.name;
map.setcenter(cityname);
}
var mycity = new bmap.localcity();
mycity.get(myfun);
map.enablescrollwheelzoom(); //启用滚轮放大缩小，默认禁用
map.enablecontinuouszoom();
map.addcontrol(new bmap.navigationcontrol()); //添加默认缩放平移控件
map.addcontrol(new bmap.overviewmapcontrol()); //添加默认缩略地图控件
var ac = new bmap.autocomplete( //建立一个自动完成的对象
{"input" : "suggestid"
,"location" : map
});
var geoc = new bmap.geocoder();
map.addeventlistener("click", function(e){
//通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
var pt = e.point;
geoc.getlocation(pt, function(rs){
//addresscomponents对象可以获取到详细的地址信息
var addcomp = rs.addresscomponents;
var site = addcomp.province+addcomp.city+ addcomp.district+addcomp.street+ addcomp.streetnumber;
//将对应的html元素设置值
// setmypoint(pt.lng,pt.lat);
$("#suggestid").attr("value",site);
console.log("获取到的位置的详情=="+site);
console.log("获取到的位置的lng=="+pt.lng);
console.log("获取到的位置的lat=="+pt.lat);
});
});
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;
// console.log(_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 setmypoint(lng,lat) {
$("#address_lng").attr("value",lng)
$("#address_lat").attr("value",lat)
}
function setplace(){
map.clearoverlays(); //清除地图上所有覆盖物
function myfun(){
var pp = local.getresults().getpoi(0).point; //获取第一个智能搜索的结果
//获取坐标
setmypoint(pp.lng,pp.lat);
console.log("lng=="+ pp.lng+";lat=="+pp.lat);
map.centerandzoom(pp, 18);
map.addoverlay(new bmap.marker(pp)); //添加标注
}
var local = new bmap.localsearch(map, { //智能搜索
onsearchcomplete: myfun
});
local.search(myvalue);
}
</script>
</body>
</html>
map.jquery.min.js
$.fn.bmap=function(h){h=$.extend({name:"map"},h);var j=$(this),b=h.name,p,m=116.331398,l=39.897445,q,a,n=$("<div class='map-warp' id='map_"+b+"'></div"),o=$("<input type='text' name='"+b+"' id='map_input_"+b+"'/>"),g=$("<input type='hidden' name='location_"+b+"' id='map_location_"+b+"'/>"),f=$('<svg t="1495288306982" class="icon" style="position: absolute;right:5px;top:50%;margin-top: -10px;" viewbox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2378" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="m883.3663 412.6822c0-203.9497-165.3527-369.3186-369.3347-369.3186-203.9811 0-369.3337 165.3679-369.3337 369.3186 0 114.989 52.5405 217.6864 134.9211 285.4175l190.8474 200.2232c9.8307 13.246 25.5877 21.8352 43.3424 21.8352 16.3706 0 31.0232-7.2981 40.9139-18.8023h0.006995543838574828l200.5313-208.9993c17.6088-15.1997 33.7645-32.0373 48.2363-50.2719l8.1298-8.4733h-1.5949839951950608c856.0917 572.0042 883.3663 495.532 883.3663 412.6822zm513.9646 596.0299c-112.971 0-204.5377-91.5619-204.5377-204.5073 0-112.9674 91.5667-204.5293 204.5377-204.5293 112.9501 0 204.5157 91.5629 204.5157 204.5293c718.4813 504.468 626.9157 596.0299 513.9646 596.0299z" p-id="2379" fill="#666666"></path></svg>');j.append(o).append(g).append(n).append(f);if(h.location||h.address){if(h.location){p=new bmap.point(h.location[0],h.location[1]);m=h.location[0];l=h.location[1];g.val(m+","+l);if(!h.address){c(p,null,false)}else{o.val(h.address)}}else{o.val(h.address);var i=new bmap.geocoder();i.getpoint(h.address,function(r){p=r;m=r.lng;l=r.lat;g.val(m+","+l)})}}else{var k=new bmap.geolocation();k.getcurrentposition(function(t){if(this.getstatus()==bmap_status_success){var s=new bmap.marker(t.point);p=t.point;m=t.point.lng;l=t.point.lat}},{enablehighaccuracy:true})}o.focus(function(r){n.show().css("zindex",999);d()});o.blur(function(r){n.hide().css("zindex",0)});function d(){if(a){return false}a=new bmap.map("map_"+b,{enablemapclick:false});a.centerandzoom(new bmap.point(m,l),15);a.enablescrollwheelzoom();a.enablecontinuouszoom();e(p);a.addeventlistener("click",function(s){e(s.point);c(s.point)});var r=o.val();q=new bmap.autocomplete({input:"map_input_"+b,location:a});q.setinputvalue(r);q.addeventlistener("onconfirm",function(v){var t=v.item.value;myvalue=t.province+t.city+t.district+t.street+t.business;function s(){var w=u.getresults().getpoi(0).point;a.centerandzoom(w,15);c(w,t);e(w)}var u=new bmap.localsearch(a,{onsearchcomplete:s});u.search(myvalue)})}function c(r,s,u){var t=new bmap.geocoder();g.val(r.lng+","+r.lat);t.getlocation(r,function(v){var w=v.addresscomponents;if(s){w=$.extend(s,w)}w.business=w.business?w.business:"";if(q){q.setinputvalue(w.province+w.city+w.district+w.street+w.streetnumber+w.business)}else{t.getlocation(r,function(x){o.val(x.address)})}if(h.callback&&!u){h.callback(w,r)}})}function e(r){a.clearoverlays();var s=new bmap.marker(r);a.addoverlay(s);s.enabledragging();s.addeventlistener("dragend",function(t){c(t.point)})}};
如对本文有疑问， 点击进行留言回复！！
网友评论