基于浏览器的定位于搜索
用谷歌 百度地图API写的地理定位于搜索，欢迎指点javascript
代码以下：css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>输入提示后查询</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script src="../API/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=ada0145080deff882d2a28e8af2047ad&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch,AMap.onComplete"></script>
<link rel="stylesheet" type="text/css" href="../API/Api.css">
<script src="../API/Final.js"></script>
</head>
<body>
<div class="box_dis">
<input class="myname" type="text" value="搜索地点" id="tipinput"/>
<!--<input type="text" name="keyword" id="myname" class="myname" />-->
</div>
<div class="distance">
<div id="container"></div>
</div>
<div class="scroll" id="view">
<div id="panel"></div>
<div id="panl" ></div>
</div>
<div id="containe" ></div>
</body>
</html>
JS：
/** * Created by lixuefeng on 16-1-25. */window.onload = function () { input(); getLocation(); click(); search();}function input() { function addListener(element, e, fn) { if (element.addEventListener) { element.addEventListener(e, fn, false); } else { element.attachEvent("on" + e, fn); } } var tipinput = document.getElementById("tipinput"); addListener(tipinput, "click", function () { tipinput.value = ""; //$('.myname').css('display', 'none'); }) addListener(tipinput, "blur", function () { tipinput.value ="点击搜索"; })}var map, geolocation;//加载地图，调用浏览器定位服务var autoOptions = { input: "tipinput"};function click() { var clickEventListener = map.on('click', function (e) { var map = {latitude: e.lnglat.getLat(), longitude: e.lnglat.getLng()} localStorage.setItem("data", JSON.stringify(map)); near_address() });}function search() { var auto = new AMap.Autocomplete(autoOptions); var placeSearch = new AMap.PlaceSearch({ map: map }); //构造地点查询类 AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发 function select(e) { placeSearch.setCity(e.poi.adcode); placeSearch.search(e.poi.name); //关键字查询查询 var poiArr = e.poi.name; localStorage.setItem("name", JSON.stringify(poiArr)); var geocoder = new AMap.Geocoder({ radius: 1000 //范围，默认：500 }); geocoder.getLocation(JSON.parse(localStorage.getItem("name")), function (status, result) { if (status === 'complete' && result.info === 'OK') { geocoder_CallBack(result); } }); }}function geocoder_CallBack(data) { var map = new BMap.Map("containe"); $(document).ready(function () { $("#panel").remove(); }); $("#panl").empty(); var geocode = data.geocodes; var dress = JSON.parse(localStorage.getItem("info")) var obj_info = {latitude: geocode[0].location.getLat(), longitude: geocode[0].location.getLng()}//gaiII localStorage.setItem("data", JSON.stringify(obj_info)); get_address()}function getLocation() { map = new AMap.Map('container', { resizeEnable: true }); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } map.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位，默认:true timeout: 10000, //超过10秒后中止定位，默认：无穷大 buttonOffset: new AMap.Pixel(10, 10),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20) zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false buttonPosition: 'RB' }); map.addControl(geolocation); geolocation.getCurrentPosition(); }); $('.amap-logo').css('display', 'none'); $('.amap-copyright').css('display', 'none'); //$('.amap-geo').css('display', 'none');}function showPosition(position) { var obj_info = {latitude: position.coords.latitude, longitude: position.coords.longitude}; console.log(obj_info.latitude) localStorage.setItem("info", JSON.stringify(obj_info)); displayPOI()}function near_address() { $(document).ready(function () { $("#panel").remove(); }); $("#panl").empty(); get_address()}var map = new BMap.Map("containe");var mOption = { poiRadius: 2500, //半径为1000米内的POI,默认100米 numPois: 30 //列举出50个POI,默认10个}map.centerAndZoom(mPoint, 15);map.enableScrollWheelZoom();var myGeo = new BMap.Geocoder();function get_address() { var mPoint = new BMap.Point(JSON.parse(localStorage.getItem("data")).longitude + 0.0065, JSON.parse(localStorage.getItem("data")).latitude + 0.0060); var myGeo = new BMap.Geocoder(); //建立地址解析实例 myGeo.getLocation(mPoint, function mCallback(rs) { var allPois = rs.surroundingPois; //获取所有POI（该点半径为100米内有6个POI点） allPois.forEach(function (place) { var html = "<div class='list' ><div class='site' id=" + place.title + ">" + place.title + "</div><div class='site_down'>" + place.address + "</div><span class='right'><img class='tex' src='../API/outstyle091100004.jpg' id=" + place.title + "></span></div></div>"; $("#panl").append(html); $($.parseHTML(html, document, true)).appendTo("body"); $(document).ready(function () { $('#' + place.title).click(function () { $('.tex').css('display', 'none'); $('#' + place.title).show(); }); }); }) }, mOption );}function displayPOI() { var mPoint = new BMap.Point(JSON.parse(localStorage.getItem("info")).longitude + 0.0065, JSON.parse(localStorage.getItem("info")).latitude + 0.0060); ss(mPoint)}function ss(mPoint) { map.addOverlay(new BMap.Circle(mPoint, 0)); //添加一个圆形覆盖物 myGeo.getLocation(mPoint, function mCallback(rs) { var allPois = rs.surroundingPois; //获取所有POI（该点半径为100米内有6个POI点） allPois.forEach(function (place) { var html = "<div class='list' ><div class='site' id=" + place.title + ">" + place.title + "</div><div class='site_down'>" + place.address + "</div><span class='right'><img class='tex' src='../API/outstyle091100004.jpg' id=" + place.title + "></span></div></div>"; $("#panel").append(html); $(document).ready(function () { $('#' + place.title).click(function () { $('.tex').css('display', 'none'); $('#' + place.title).show(); }); }); }) }, mOption );}
相关文章
- 1. 基于浏览器的Linux
- 2. Geolocation ：基于浏览器的定位服务
- 3. 基于浏览器的HTML5地理定位
- 4. 浏览器历史搜索
- 5. Chrome浏览器自定义搜索地址高效搜索
- 6. 基于浏览器的容器 Codetainer
- 7. 基于浏览器的安全漏洞
- 8. 基于Chrome浏览器的swagger-bootstrap-ui
- 9. 基于cefsharp的用户浏览器
- 10. 基于Goanna的开源Web浏览器
- 更多相关文章...
- • XSLT 浏览器 - XSLT 教程
- • Opera 浏览器 - 浏览器信息
- • ☆基于Java Instrument的Agent实现
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章