zoukankan      html  css  js  c++  java
  • 基于浏览器的定位于搜索

    用谷歌 百度地图API写的地理定位于搜索,欢迎指点

    代码如下:

    <!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
    );
    }


  • 相关阅读:
    IEnumerable<T>接口主要成员
    SQL LinqToSql Lambda QA
    css网页布局兼容性有哪些要点与诀窍
    【转】解决大量图片造成的页面延迟
    C# override,new 的区别+C# 接口的显示实现和隐示实现
    ap_invoice_distributions_all到xla_ae_lines
    Mysql从索引原理对SQL分析优化实战
    如何实现IM表情、图片、文件之间的通讯?
    五步教你如何使用k8s快速部署ES
    ClickHouse MergeTree引擎的简单介绍
  • 原文地址:https://www.cnblogs.com/turbo12138/p/5563979.html
Copyright © 2011-2022 走看看