前端js实现百度地图自动完成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.map{width: 500px;height: 500px;border:1px solid #666;float:left;}
.txt{float:left;margin-left:20px;}
input{width: 200px;height: 30px;display: block;margin-bottom:10px;border:1px solid #ccc;}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div id="txt" class="txt">
<input type="text" id="keyword" placeholder="请输入关键字">
<input type="text" id="province" placeholder="显示具体省" readonly style="background: #dcdcdc;">
<input type="text" id="city" placeholder="显示具体市" readonly style="background: #dcdcdc;">
<input type="text" id="address" placeholder="显示具体地址" readonly style="background: #dcdcdc;">
</div>
</body>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SoacLT8htV8B0rzsZ0PR2aLmnB0h0pRP"></script>
<script type="text/javascript">
window.onload=function(){
var oKeyword = document.getElementById("keyword");
var oProvince = document.getElementById("province");
var oCity = document.getElementById("city");
var oAddress = document.getElementById("address");

var foo = {
//后面的操作，都是把地址信息填入这个address，所以传给后台的时候就可以直接传这个数据
address : {
province : '',
provinceCode : '0',
city : '',
cityCode : '0',
district : '',
districtCode : '0',
longitude : '',
latitude : ''
},
// 根据point来初始化地图
initMap : function(lng,lat){
var _this = this;

var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(lng, lat) // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

// 添加中心小红点
var centerPoint = new BMap.Marker(point);
map.addOverlay(centerPoint);

//建立一个自动完成的对象，keyword出现下拉选择
var ac = new BMap.Autocomplete({
"input" : "keyword",
"location" : map
});
ac.addEventListener("onconfirm", function(e) {
// console.log(e)
var thisValue = e.item.value;
// console.log(thisValue)
var thisProvince = thisValue.province;
var thisCity = thisValue.city;
var thisDistrict = thisValue.district;
var thisStreet = thisValue.street;
var thisStreetNumber = thisValue.streetNumber;
var thisBusiness = thisValue.business;

var thisKey = thisProvince+thisCity+thisDistrict+thisStreet+thisStreetNumber+thisBusiness;

_this.searchByKey(map,thisKey,centerPoint);
})
},
// 输入关键字搜索，根据关键字更新地图并获取信息
searchByKey : function(map,keyword,centerPoint){
var _this = this;

var localSearch = new BMap.LocalSearch(map);
// 启用根据结果自动调整地图层级，当指定了搜索结果所展现的地图时有效
localSearch.enableAutoViewport();
localSearch.search(keyword);
localSearch.setSearchCompleteCallback(function (searchResult) {
if(searchResult && searchResult.getPoi(0)){
var poi = searchResult.getPoi(0);
if(poi.point){
map.centerAndZoom(poi.point,15);
centerPoint.setPosition(poi.point);
}
}
})
},
// 一般初始化地图，设置北京天安门
init : function(){
_this.initMap(116.404,39.915)
},
// 初始化当前城市
initLocalCity : function(){
var _this = this;

var map = new BMap.Map("map");
var myCity = new BMap.LocalCity();
myCity.get(function(result){
console.log(result);
// var point = result.center;
var lng = result.center.lng;
var lat = result.center.lat;

_this.initMap(lng,lat)
});
},
// 初始化当前位置
initLocalPoint : function(){
var _this = this;

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lng = position.coords.longitude;
var lat = position.coords.latitude;
// console.log(lng+':'+lat);
var gpsPoint = new BMap.Point(lng, lat);

// 坐标转成百度需要的坐标，并初始化地图
// gpsPoint：转换前坐标，第二个参数为转换方法，0表示gps坐标转换成百度坐标，callback回调函数，参数为新坐标点
BMap.Convertor.translate(gpsPoint, 0, function(data){
_this.initMap(data.lng,data.lat);
})
})
} else {
alert("Your browser does not support Geolocation!");
}
}
}

// foo.init(); //以北京初始化地图
foo.initLocalCity(); //以当前城市初始化地图
// foo.initLocalPoint(); //以当前坐标初始化地图
}
</script>
</html>

前端js实现百度地图自动完成

猜你喜欢