输入地址显示经纬度并且在地图上显示具体位置
博主比较懒，不过多描述，直接上代码，通俗易懂，哈哈哈哈哈哈
引入百度地图<script type="text/javascript" src="http://api./api?v=2.0&ak=你申请的ak"></script>引入jQuery<script src="../../static/jquery/jquery-2.1.4.min.js"></script>引入css样式<link rel="stylesheet" href="../../static/css/allmap.css" media="all">引入js<script src="../../static/js/map5.js"></script>引入省市区三级联动cityData数据cityData.js
jQuery，css和js的路径可根据自己放置文件的路径写入，下面有封装好的css和js，可自行复制使用
效果图
HTML
<div class="margin-t2">省：<select id="provinceName"><option>--请选择--</option></select>市：<select id="cityName"><option>--请选择--</option></select>区：<select id="AreaName"><option>--请选择--</option></select>详细地址：<input id="address" type="text" value="" /><input type="button" value="查询" id="searchByStationName"/></div><div class="margin-t2">坐标：<input id="result1" disabled /> -- <input id="result2" disabled /></div><input type="button" id="btn_add" class="search-newbtn" value="保存"/><div id="container" class="map_sy"></div>
css
.BMap_cpyCtrl {display: none;}.anchorBL{display: none;}.search-newbtn{padding:10px;background:#1e9fff;color:#fff;border:none;cursor: pointer; border-radius: 5px; width:150px; margin:20px 0 0 100px;}.margin-t2{margin-top:20px;}.map_sy{position: absolute;width:80%; height: 700px;border: 1px solid gray;margin-top:30px;}
js
//省市区三级联动var provice = document.getElementById("provinceName");var citys = document.getElementById("cityName");var areas = document.getElementById('AreaName');var cities;//定义一个变量存放市var newarea; //定义一个变量存放区var data = cityData;for(var i in data){var options = new Option(data[i].text,data[i].value);//实例化，data[i].text为省名，data[i].value为值provice.appendChild(options); //动态添加}provice.onchange = function () {citys.options.length = 1;//城市选择的长度变为1个var provices = this.value;//将当前省份的值提取出来for(var i in data){if(provices==data[i].value){cities = data[i].children//将市提取出来provice.text=data[i].text}}console.log(cities,103)for(var j in cities){var cityselect = new Option(cities[j].text, cities[j].value);citys.appendChild(cityselect);//将市动态添加到下拉框中}}citys.onchange = function () {areas.options.length = 0;//区的选择长度变为0var city = this.value; //将当前市的值提取出来 for(var i in cities){if(city==cities[i].value){newarea = cities[i].children//将区提取出来citys.text=cities[i].text}}if (citys.text != "") {map.centerAndZoom(citys.text, 13);//选中下拉框重新设置地图中心点}for(var k in newarea){ //遍历区var areaselect = new Option(newarea[k].text, newarea[k].value);areas.appendChild(areaselect);//将区动态添加到下拉框中}}areas.onchange = function () {var area = this.value; //将当前市的值提取出来 for(var i in newarea){if(area==newarea[i].value){areas.text=newarea[i].text}}}//地图var map = new BMap.Map("container");var my_point1 = document.getElementById("result1").value;var my_point2 = document.getElementById("result2").value;var lng = my_point1 || 116.331398;var lat = my_point2 || 39.897445;var point = new BMap.Point(lng, lat);map.centerAndZoom(point, 13);var default_address = document.getElementById("address").value;if (default_address) {map_marker_and_click_infowindow(default_address, lng, lat);}map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件//显示小图标标注function map_marker_and_click_infowindow(address, lng, lat) {var marker = new BMap.Marker(new BMap.Point(lng, lat));map.addOverlay(marker);// 创建标注，为要查询的地方对应的经纬度var content = address + "<br/>经度：" + lng + "<br/>纬度：" + lat;var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");marker.addEventListener("click", function () {this.openInfoWindow(infoWindow);});}var localSearch = new BMap.LocalSearch(map); $("#searchByStationName").on("click",function(){var keyword = document.getElementById("address").value;console.log(provice.text,107)localSearch.setSearchCompleteCallback(function (searchResult) {if (localSearch.getStatus() == BMAP_STATUS_SUCCESS) {var poi = searchResult.getPoi(0);if (poi) {document.getElementById("result1").value = poi.point.lng ;document.getElementById("result2").value = poi.point.lat;map.centerAndZoom(poi.point, 13);//下面是弹窗显示（小图标标注）map_marker_and_click_infowindow(provice.text+citys.text+areas.text+keyword, poi.point.lng, poi.point.lat);}} else {alert("输入的地址错误！");}});localSearch.search(provice.text+citys.text+areas.text+keyword);//在地图查找相应位置显示})//保存$("#btn_add").on("click",function(){console.log(111)})
