JS——基于百度地图 关键字提示输入+地址逆解析

1. 引入百度jsapi

1.https://api.map.baidu.com/api?v=2.0&ak=自己申请的AK
2.https://api.map.baidu.com/api?type=webgl&v=1.0&ak=自己申请的AK

2. 创建baiduMap.js

// 初始化百度地图API功能
var map, ac, myValue, geoc, addressCallback , config

/*初始化地图*/
function initializeamap(obj) {
	addressCallback = obj.coordinate || function(res){console.log(res)}
	map = new BMap.Map(obj.amapid)
	geoc = new BMap.Geocoder()
	map.centerAndZoom(obj.cityname || "北京", obj.zoom || 12)
	ac = new BMap.Autocomplete({
		"input": obj.suggestId, "location": map
	})
	ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
		var _value = e.item.value;
		myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
		setPlace();
	})
	map.addEventListener("click",function (e) {
		renderingPlace({
			lng:e.point.lng,
			lat:e.point.lat
		})
	})
}


/*设置地点*/
function setPlace() {
	function myFun() {
		var pp = local.getResults().getPoi(0).point//获取第一个智能搜索的结果
		renderingPlace(pp)
	}
	var local = new BMap.LocalSearch(map, { //智能搜索
		onSearchComplete: myFun
	});
	local.search(myValue);
}

/*渲染地点*/
function renderingPlace(point){
	map.clearOverlays()
	var label = new BMap.Label("当前坐标："+point.lng+','+point.lat),
		marker = new BMap.Marker(point)
	marker.setLabel(label)
	map.centerAndZoom(point, 19); //设置地图中心点
	map.addOverlay(marker);
	callback(point)
}

/*回调数据*/
function callback(point){
	geoc.getLocation(point,function (res) {
		addressCallback(res)
	})
}

/*切换城市*/
function changeCity(cityName) {
	var cityName_ = cityName
	if(map){
		map.reset()
		map.centerAndZoom(cityName_, 12);
		setTimeout(function () {
			ac.setLocation(map)
		},100)
	}
}

3. 引入baiduMap.js后初始化百度地图

/*初始化百度地图*/
initializeamap({
	amapid: 'l-map', //地图画布id
	suggestId: 'suggestId', //输入框id
	cityname:"北京",//默认城市
	zoom: "12",//地图缩放层次
	coordinate: function (item) { //回调数据
		console.log(item)
	}
})

4. 切换城市

changeCity("南山区")

效果（html部分自行更改）