百度地图下拉框搜索建议,并自动添加标注点

HTML代码(MVC)

@*-------------------调用地图接口在百度地图的基础上,添加自动搜索(地区)框----------------------------------*@
@{
    Layout = null;
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=CGkMErD3Gux07tGL26GCoWGU"></script>
@*搜索框*@
<div style="margin:50px">请输入:<input type="text" id="suggestId" size="30" placeholder="搜索地区、" style="width:300px;" /></div>
@*搜索结果*@
<div id="searchResultPanel" style="border:1px solid green;width:300px;height:600px;position:absolute;left: 650px;top:20px;"></div>
@*添加地图的地方*@
<div id="container"></div>

JS代码

<script type="text/javascript">

    //初始化地图
    var map = new BMap.Map("container");//在百度地图容器中创建一个地图
    var point = new BMap.Point(116.3964, 39.9093);//定义一个中心点坐标
    map.centerAndZoom(point, 5);//设定地图的中心点和坐标并将地图显示在地图容器中
    map.enableScrollWheelZoom();//允许鼠标滑轮放大或缩小

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "suggestId",
            "location": map
        });

    function G(id) {
        return document.getElementById(id);
    }
    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() {// 创建地址解析器实例
        var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(myValue, function (point) {
            if (point) {
                map.centerAndZoom(point, 9);//重新定位地图中心点
                map.addOverlay(new BMap.Marker(point));//创建一个地图标注
            }
        }, "北京");
    }
</script>
<style type="text/css">
    body {
        font-size: 13px;
        margin: 0px;
    }

    #container {
        width: 600px;
        height: 400px;
    }

    .label {
        margin-left: 20px;
        font-weight: bold;
        font-size: 14px;
    }
</style>
时间: 2024-10-12 08:35:26

百度地图下拉框搜索建议,并自动添加标注点的相关文章

2019如何刷百度电脑下拉框?

如何刷百度下拉框? 巧推网业务主要是快速排名和下拉框排名,今天小编给大家说说百度下拉框排名是怎么刷,以及效果如何?下面先看看我们给自己刷的几个案例: 以上是2个百度电脑端下拉框案例,我们可以看到其构成是“主关键词”+后缀副词:比如“企业排名优化”是主词,“巧推网”就是后缀词,我们在刷词的时候,后缀一般都是我们的品牌词.这样用户点击这个下拉词的时候,就会匹配到我们官网信息,从而起到引流的作用. 不仅如此,即时用户没有点击进来,也起到了增加我们品牌词曝光率. 刷下拉词的大概原理就是系统模仿用户的搜索

使用jquery select2实现下拉框搜索功能

由于公司后台系统下拉框数据量太多了,用户操作起来要不方便所以增加了下拉框里面一个搜索功能 1从官网下载jquery select2 下来 地址https://select2.github.io/ 2:引进到自己的java工程里面 3:在jsp页面进行引进来,在这里我们只需要三个文件就可以了 4:jsp 页面加载时直接调用 效果如下:

下拉框(可输入+自动匹配)

实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签<datalist>,对应demo如下: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option val

js+servlet实现百度搜索栏下拉框的实现

前端代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> #mydiv { position: absolute; left: 50%; top: 50%; margin-left: -200p

BootStrap下拉框搜索功能

<!DOCTYPE html> <html> <head> <title>jQuery bootstrap-select可搜索多选下拉列表插件-www.daimajiayuan.com</title> <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"

DataTables给每一列添加下拉框搜索

$(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this.api(); api.columns().indexes().flatten().each( function ( i ) { var column = api.column( i ); var select = $('<select><option value=""&

下拉框搜索条件

前台页面 : <div role="control" label="是否已经全部开票"> <input class="mini-combobox" id="isKaipiao" bind="isKaipiao" allowInput="false" data="[{text:'所有选择 ',id:''},{text:'已全部开票 ',id:'1'},{text

下拉框上移、下移、添加、移除demo

1 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 2 3 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 4 5 <script type="text/javascript"> 6

miniui搜索单选按钮组-时间选择框验证-下拉框实现

页面代码: <div role="row"> <div role="control" label="姓名"> <input id="search_name" class="mini-textbox" emptyText="请输入姓名" bind="dataBean.name" /> </div> <div role