Front-end js realizes automatic completion of Baidu map

<!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"); //The following operations are to fill in the address information into this address, so you can directly pass this data when passing it to the background var foo = {
var oAddress = document.getElementById("address");

address : {
province : '',
provinceCode : '0',
city : '',
cityCode : '0',
district : '',
districtCode : '0',
longitude : '',
latitude : ''
},
// according to point to initialize the map
initMap : function(lng,lat){
var _this = this;

var map = new BMap.Map("map"); // create a Map instance
var point = new BMap.Point(lng, lat) // Create point coordinates
map.centerAndZoom(point, 15); // Initialize the map, set the center point coordinates and map level
map.enableScrollWheelZoom(true); //Enable mouse wheel zoom

// Add the center red point
var centerPoint = new BMap.Marker(point);
map.addOverlay(centerPoint);

//Create an autocomplete object, and the keyword appears in the drop-down selection
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);
})
} ,
// Enter keyword search, update the map according to the keyword and get information
searchByKey : function(map,keyword,centerPoint){
var _this = this;

var localSearch = new BMap.LocalSearch(map);
// Enable automatic adjustment based on results Map level, valid when the map displayed by the search results is specified
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);
}
}
})
},
// Generally initialize the map, set Beijing Tiananmen
init : function(){
_this.initMap(116.404,39.915)
},
// Initialize the current city
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);

// Convert the coordinates to the coordinates required by Baidu, and initialize the map
/ / gpsPoint: The coordinates before conversion, the second parameter is the conversion method, 0 means the gps coordinates are converted into Baidu coordinates, the callback callback function, the parameter is the new coordinate point
BMap.Convertor.translate(gpsPoint, 0, function(data){
_this. initMap(data.lng,data.lat);
})
})
} else {
alert("Your browser does not support Geolocation!");
}
}
}

// foo.init(); //initialize the map with Beijing
foo.initLocalCity(); //initialize the map with the current city
// foo.initLocalPoint(); //initialize the map with the current coordinates
}
</script>
</html>

Front-end js realizes automatic completion of Baidu map

Guess you like