基於瀏覽器的定位於搜索

時間  2019-12-02
標籤 基於 瀏覽器 位於 搜索 欄目 瀏覽器 简体版
原文   原文鏈接

用谷歌 百度地圖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    );}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程