zoukankan      html  css  js  c++  java
  • 百度地图poi搜索框

    1:初始化地图

    var map = new BMap.Map("container");//初始化地图
    point = new BMap.Point(126.65771686, 45.77322463);
    ////初始化地图中心点
    map.centerAndZoom(point, 10);
    //启用滚轮放大缩小   默认禁用
    map.enableScrollWheelZoom();   
    //启用地图惯性拖拽   默认禁用
    map.enableContinuousZoom(); 
    
    //添加搜索框 步骤2

    2:添加搜索框

     // 创建控件
        var myZoomCtrl = new ZoomControl();
        // 添加到地图当中
        map.addControl(myZoomCtrl);
    
    
        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;
            $("#searchResultPanel").innerHTML = str;
        });
    
        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            debugger;    
        var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            $("#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;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 14);
                marker=new BMap.Marker(pp)
                map.addOverlay(marker);    //添加标注
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
              onSearchComplete: myFun
            });
            local.search(myValue);
        }
  • 相关阅读:
    vue富文本编辑器
    vue图片上传组件
    vue全局使用axios插件请求ajax
    vue项目初始化时npm run dev报错webpack-dev-server解决方法
    vue axios使用form-data的形式提交数据
    react-keep-alive
    create-react-app 兼容 ie9
    next-定义路由
    next-支持css样式和按需加载antd
    react-错误边界
  • 原文地址:https://www.cnblogs.com/hejunnuo/p/12766474.html
Copyright © 2011-2022 走看看