demo--百度地图

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg"><div class="form-group"><label class="col-sm-3 control-label">详细地址：</label><div class="col-sm-8"><input  id="suggestId" name="address" class="form-control" type="text" /><!--<input id="suggestId" name="companyAddressDetail" class="form-control" type="text">--><div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div></div></div><div class="form-group"><label class="col-sm-3 control-label"></label><div class="col-sm-8"><div id="l-map" class="col-sm-17" style="height: 300px;"></div></div></div></body><script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=你自己申请的百度地图的key"></script><script type="text/javascript">// 百度地图API功能function G(id) {return document.getElementById(id);}/*var map = new BMapGL.Map('container');*/var map = new BMap.Map("l-map");map.enableScrollWheelZoom(true);map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。// map.center(12);var ac = new BMap.Autocomplete(    //建立一个自动完成的对象{"input" : "suggestId","location" : map});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;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 setPlace(){map.clearOverlays();    //清除地图上所有覆盖物function myFun(){var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果console.log("维度="+pp.lat+"-----经度==="+pp.lng);map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp));    //添加标注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);}/* function setPlace(){map.clearOverlays();    //清除地图上所有覆盖物function myFun(){var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp));    //添加标注}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);} */var loading ;map.addEventListener('click', function (e) {// alert('点击位置经纬度：' + e.point.lng + ',' + e.point.lat);$('#lat').val(e.point.lng);//获取到的纬度$('#lon').val(e.point.lat);//获取到的经度// 清除地图上所有的覆盖物map.clearOverlays();var point = new BMap.Point(e.point.lng, e.point.lat);map.centerAndZoom(point, 19);var marker = new BMap.Marker(point);map.addOverlay(marker);loading = layer.load(1,{icon: 0, // 0~2 ,0比较好看shade: [0.5,'black'] // 黑色透明度0.5背景});getaddress(e);});function getaddress(e){//浏览器定位var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(e.point);map.addOverlay(mk);map.panTo(e.point);var gc = new BMap.Geocoder();var pointAdd = new BMap.Point(e.point.lng, e.point.lat);gc.getLocation(pointAdd, function(rs){try {$("#suggestId").val(rs.surroundingPois[0].title);$("#province").val(rs.addressComponents.province);$("#city").val(rs.addressComponents.city);$("#county").val(rs.addressComponents.district);}catch (e) {layer.alert("所选位置没有详细名称");}layer.close(loading);})}else {}},{enableHighAccuracy: true});}</script></html>

技术交流群

输入地址查询并获取地址的经纬度-百度地图-JS相关推荐

百度地图js 定位并获得精确的地址信息
使用百度地图js api定位并获得精确地址: var map = new BMap.Map("map"); var geolocation = new BMap.Geolocati ...
php地址转换成经纬度,百度地图获取地址转换为经纬度
html> 根据地址查询经纬度 a.{ margin-right:100px; } style="position: absolute; margin-top:30px; width: ...
android 经纬度百度地图,05-04【咨询】安卓开发百度地图输入地址，将得到的经纬度存储...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼求助啊,用Android studio进行百度地图的开发:输入一个地址,将其经纬度存储起来,后面要用.但是赋值后,出了函数,又相当于没赋值. public ...
html百度地图获取城镇街道,集成百度地图根据地址获取经纬度，定位地址到街道...
根据地址查询经纬度 $(function(){ var map = new BMap.Map("container"); map.centerAndZoom("北京&qu ...
根据php经纬度百度地图打点,PHP使用百度地图获取指定地址坐标：经纬度（图文+视频）...
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之经纬度的实现方法. 在之前的文章[PHP使用百度地图获取指定地址坐标:创建AK]中,已经给大家介绍了如何在百度地图开放平台中创建AK(api ...
phpip地址查询_PHP获取IP地址所在的地理位置
/* *根据新浪IP查询接口获取IP所在地 */ function getIPLoc_sina($queryIP){ $url = 'http://int.dpool.sina.com.cn/iplo ...
移动端geolocation插件+百度地图js获取地址
第一步:引入获取经纬度的插件 1 require("cordova!cordova-plugin-geolocation");// geo定位第二步:定义好获取经纬度的方法,通过 ...
获取界面url_PHP调用百度地图接口，根据IP地址获取地区
1.登录百度地图开放平台 http://lbsyun.baidu.com/ 2.选择微信登录 3.点击控制台,看下一下界面,点击应用管理 4.创建应用,我的是网站应用,所以选择浏览器端 5.里边所有字 ...
php根据位置获取经纬度(百度地图)
注意:申请的ak填写服务器端 1.根据地址获取经纬度 /**根据位置获取经纬度* @param $area* @return mixed*/protected function getLonLLat( ...

输入地址查询并获取地址的经纬度-百度地图-JS

demo--百度地图

输入地址查询并获取地址的经纬度-百度地图-JS相关推荐

最新文章

热门文章