腾讯地图的初步使用

最新推荐文章于 2023-07-11 15:02:41 发布

你的美，让我痴迷

最新推荐文章于 2023-07-11 15:02:41 发布

阅读量771

点赞数

本文链接：https://blog.csdn.net/weixin_45932157/article/details/108009458

版权

@{
    ViewBag.Title = "MapTest";
}

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=4OSBZ-ZZCKW-AUZRA-O6OXD-MTWZQ-RZBF5&libraries=drawing,geometry,autocomplete,convertor"></script>
 
<script src="~/Content/ods/js/clipboard.min.js"></script>
<script src="~/Content/layui/layui.js"></script>

<link href="~/Content/css/mycss/mapcss.css" rel="stylesheet" />

<div id="api_map_top">
    <label for="fen_xi_di_qu">地名：</label><input type="textbox" name="fen_xi_di_qu" id="fen_xi_di_qu" placeholder="如：北京" class="all_srk_1" style="width:110px"> <input type="button" value="搜索" onclick="_fen_xi_di_qu()" class="all_an_1"><div class="pmk_sj_show"></div>
    <label for="all_lng_show">经度：</label><input type="text" name="all_lng_show" id="all_lng_show" readonly   class="all_srk_1" style="width:160px"><div class="pmk_sj_show"></div>
    <label for="all_lat_show">纬度：</label><input type="text" name="all_lat_show" id="all_lat_show" readonly   class="all_srk_1" style="width:160px"><div class="pmk_sj_show"></div>
</div>
 

<script>
    var geocoder = new qq.maps.Geocoder();
    var center;
    function getLal(address) {
         
        //对指定地址进行解析
        geocoder.getLocation(address);
        //设置服务请求成功的回调函数
        geocoder.setComplete((res) => {
            var lat = document.getElementById("all_lng_show").value = res.detail.location.lat;
            var lng = document.getElementById("all_lat_show").value = res.detail.location.lng; 
            console.log(address + '成功回调数据', "经度：" + res.detail.location.lat, "纬度：" + res.detail.location.lng);
            ///中心位置坐标生成
            center = new qq.maps.LatLng(res.detail.location.lat, res.detail.location.lng);
            var map = new qq.maps.Map(
                document.getElementById("mapcontainer"),
                {
                    center: center,
                    zoom: 15
                }
            );

        });
        //若服务请求失败，则运行以下函数
        geocoder.setError((err) => {
            layui.use('layer', function () { //独立版的layer无需执行这一句
                var layer = layui.layer;

                layer.msg(address + '地址输入错误'+err, { icon: 0, offset: "auto", time: 2000 });
            })
            console.log(address + '地址输入错误', err)
        })
    }
    getLal("北京");
     
    function _fen_xi_di_qu() {
        var address = document.getElementById("fen_xi_di_qu").value;
        getLal(address);
    }
     
</script>
<div id="mapcontainer" style="height:100%;min-height:200px;"></div>

css提供：

 
#api_map_top {
    line-height: 36px
}

    #api_map_top label {
        margin-left: 5px
    }

#api_map_k {
    height: 450px;
    width: 98%;
    display: block;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto
}

#api_map {
    position: absolute;
    display: block;
    overflow: hidden
}

#api_map_zuobiao {
    height: 21px;
    width: 21px;
    position: relative;
    z-index: 99;
    display: block;
    overflow: hidden
}
html {
    _overflow-y: scroll
}

body, td, th {
    font-size: 12px;
    font-family: Verdana,Geneva,sans-serif
}

body {
    margin: 0;
    background-color: #f5fcff;
    background-position: 0 25px;
    background-image: url(//f.51240.com/img/bg.gif?v=17052205);
    background-repeat: repeat-x
}

a:link {
    color: #006db7;
    text-decoration: underline
}

a:visited {
    color: #006db7;
    text-decoration: underline
}

a:hover {
    color: #F00;
    text-decoration: underline
}

a:active {
    text-decoration: none
}

img {
    border: 0;
    max-width: 100%
}

.h2dabiaoti, .dabiaoti {
    color: #ff6500;
    font-weight: bold;
    text-align: center;
    font-size: 34px;
    margin: 0;
    padding: 5px
}

.dabiaoti2 {
    font-size: 16px;
    background-color: #d6edfe;
    color: #006db7;
    line-height: 32px;
    clear: both;
    height: 32px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 8px;
    padding-left: 8px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px
}

.huisefengexian {
    color: #666;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #d9d9d9;
    padding-bottom: 3px;
    margin-bottom: 10px;
    text-align: center
}

p:first-letter {
    padding-left: 30px
}

.neirong {
    color: #232323;
    padding: 5px;
    font-size: 14px;
    margin-top: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    line-height: 26px
}

.img_yuanjiao {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #CCC
}

.ju_zhong, .ju_zhong td {
    text-align: center
}

.a12 {
    font-size: 12px
}

.cu20 {
    font-size: 20px;
    font-weight: bold
}

.cu26 {
    font-size: 26px;
    font-weight: bold
}

.cu36 {
    font-size: 36px;
    font-weight: bold
}

.baisecu {
    color: #fff;
    font-weight: bold
}

.baise {
    color: #fff
}

.hongse {
    color: red
}

.lvse {
    color: #008200
}

.lanse {
    color: #00f
}

.qianlan {
    color: #639ace;
    font-size: 12px
}

#top {
    line-height: 25px;
    height: 25px;
    background-image: url(//f.51240.com/img/all_bg.png?v=20050301);
    background-repeat: repeat-x;
    background-position: 0 -204px;
    padding-right: 7px;
    padding-left: 7px
}

#main {
    clear: both;
    width: 990px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    overflow: hidden
}

#top_logo {
    clear: both;
    height: 100px;
    overflow: hidden
}

    #top_logo #top_logo_img {
        float: left;
        width: 297px;
        height: 74px;
        margin-top: 12px;
        margin-left: 10px;
        padding: 0;
        display: block;
        overflow: hidden
    }

    #top_logo #ggwz___1 {
        float: left;
        width: 468px;
        height: 60px;
        margin-top: 19px;
        margin-left: 120px;
        padding: 0;
        text-align: center
    }

#main #main_left {
    float: left;
    width: 732px;
    display: block;
    overflow: hidden
}

#main #main_right {
    float: left;
    margin-left: 8px;
    width: 250px;
    overflow: hidden
}

    #main #main_right #main_right_zi {
        width: 250px;
        display: block;
        overflow: hidden
    }

#main #main_content {
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
    overflow: hidden
}

#main_link {
    clear: both;
    width: 980px;
    margin-top: 8px;
    margin-right: auto;
    margin-left: auto;
    display: block;
    overflow: hidden
}

.kuang {
    display: block;
    overflow: hidden;
    clear: both;
    border: 1px solid #addfff;
    background-color: #FFF
}

    .kuang .kuang_title {
        clear: both;
        overflow: hidden;
        line-height: 25px;
        background-image: url(//f.51240.com/img/all_bg.png?v=20050301);
        background-repeat: repeat-x;
        background-position: 0 -229px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #addfff;
        padding-right: 8px;
        padding-left: 8px
    }

        .kuang .kuang_title a {
            font-weight: bold
        }

#main_title .main_title_gt {
    margin-right: 3px;
    margin-left: 3px
}

.sy_ico {
    margin-top: 3px;
    margin-bottom: 3px;
    padding-right: 6px;
    padding-left: 6px;
    display: block;
    overflow: hidden
}

.sy_ico_k {
    width: 25%;
    float: left;
    display: block;
    overflow: hidden
}

.sy_ico a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    height: 79px;
    display: block;
    overflow: hidden;
    margin: 3px;
    color: #a5a5a5;
    cursor: pointer !important;
    cursor: hand
}

    .sy_ico a:hover {
        background-color: #eefbff;
        text-decoration: none;
        color: #333
    }

    .sy_ico a:link {
        text-decoration: none
    }

    .sy_ico a:visited {
        text-decoration: none
    }

    .sy_ico a:active {
        text-decoration: none
    }

    .sy_ico a .t_b {
        width: 38%;
        display: block;
        overflow: hidden;
        float: left
    }

        .sy_ico a .t_b img {
            margin-top: 9px;
            margin-right: 10px;
            margin-bottom: 9px;
            height: 60px;
            width: 60px;
            float: right;
            display: block;
            overflow: hidden;
            background-repeat: no-repeat;
            box-shadow: 0 1px 3px #000;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px
        }

    .sy_ico a .i_k {
        width: 62%;
        display: block;
        overflow: hidden;
        float: left
    }

        .sy_ico a .i_k .i_k_t {
            color: #333;
            clear: both;
            height: 26px;
            margin-top: 18px;
            font-size: 16px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .sy_ico a .i_k .i_k_i {
            clear: both;
            height: 29px;
            font-size: 12px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

.sy_ico_20 .sy_ico a {
    height: 36px
}

    .sy_ico_20 .sy_ico a .t_b {
        width: 20%
    }

        .sy_ico_20 .sy_ico a .t_b img {
            margin-top: 7px;
            height: 20px;
            width: 20px;
            box-shadow: 0 1px 1px #000;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px
        }

    .sy_ico_20 .sy_ico a .i_k {
        width: 80%
    }

        .sy_ico_20 .sy_ico a .i_k .i_k_t {
            float: left;
            clear: none;
            height: 26px;
            margin-top: 7px
        }

        .sy_ico_20 .sy_ico a .i_k .i_k_i {
            margin-top: 12px;
            margin-left: 6px;
            float: left;
            clear: none;
            height: 26px
        }

#bottom_top {
    clear: both;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #e7f7ff
}

#bottom {
    line-height: 25px;
    text-align: center;
    color: #999
}

    #bottom a, #bottom a:visited {
        color: #999
    }

#jie_mian_qie_huan {
    font-weight: bold;
    line-height: 25px;
    margin-bottom: 10px;
    text-align: center
}

    #jie_mian_qie_huan a {
        font-weight: normal;
        text-decoration: none
    }

.tl {
    margin: 0;
    padding: 0;
    display: block;
    overflow: hidden
}

    .tl .tl_xg a {
        color: #F00
    }

    .tl li {
        list-style-type: none;
        text-indent: 10px;
        width: 50%;
        height: 28px;
        line-height: 28px;
        float: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: block;
        overflow: hidden
    }

#j_z {
    display: none;
    overflow: visiable;
    position: fixed;
    z-index: 100;
    top: 35%;
    left: 50%;
    padding: 1px;
    width: 370px;
    margin-left: -185px;
    height: 100px;
    line-height: 100px;
    background-color: #9dc8e8;
    opacity: .9
}

    #j_z span {
        display: block;
        text-align: center;
        font-size: 14px;
        text-align: center;
        background-color: #e9f5fe;
        font-family: Verdana,Geneva,sans-serif
    }

    #j_z a {
        text-decoration: none;
        height: 20px;
        line-height: 20px;
        width: 18px;
        top: 1px;
        right: 1px;
        position: absolute;
        z-index: 101;
        background-color: #bde2fb;
        font-size: 14px;
        text-align: center;
        font-family: Verdana,Geneva,sans-serif
    }

.nry_bt {
    clear: both;
    width: 98%;
    height: 70px;
    line-height: 64px;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    text-overflow: ellipsis
}

    .nry_bt img {
        height: 54px;
        width: 54px;
        display: inline-block;
        overflow: hidden;
        background-repeat: no-repeat;
        box-shadow: 0 1px 3px #000;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px
    }

    .nry_bt h1 {
        margin-left: 10px;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        font-weight: normal;
        font-family: "\u9ed1\u4f53";
        color: #333;
        font-size: 44px;
        line-height: 64px;
        display: inline-block;
        overflow: hidden
    }

.list {
    clear: both;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 5px;
    margin-left: 40px;
    display: block;
    overflow: hidden
}

    .list li {
        margin: 0;
        padding-top: 4px;
        padding-right: 0;
        padding-bottom: 4px;
        padding-left: 0;
        list-style-type: decimal;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #d9d9d9;
        display: block;
        overflow: hidden
    }

        .list li a:link {
            color: #333;
            font-size: 16px;
            text-decoration: none
        }

        .list li a:visited {
            color: #333;
            font-size: 16px;
            text-decoration: none
        }

        .list li a:hover {
            text-decoration: underline
        }

        .list li .beizhu {
            color: #8b8b8b
        }

.list_3 {
    clear: both;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 25px;
    margin-left: 25px;
    display: block;
    overflow: hidden
}

    .list_3 li {
        margin: 0;
        padding-top: 4px;
        padding-right: 0;
        padding-bottom: 4px;
        padding-left: 0;
        list-style-type: none;
        list-style-position: outside;
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #d9d9d9;
        display: block;
        overflow: hidden
    }

        .list_3 li a:link {
            color: #333;
            font-size: 16px;
            text-decoration: none
        }

        .list_3 li a:visited {
            color: #333;
            font-size: 16px;
            text-decoration: none
        }

        .list_3 li a:hover {
            text-decoration: underline
        }

        .list_3 li .beizhu {
            color: #8b8b8b
        }

.list_2 {
    clear: both;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 25px;
    margin-left: 25px;
    display: block;
    overflow: hidden
}

    .list_2 li {
        float: left;
        border: 1px solid #d9d9d9;
        margin-top: 3px;
        margin-bottom: 6px;
        margin-right: 10px;
        margin-left: 0;
        padding-right: 4px;
        padding-left: 4px;
        white-space: nowrap;
        list-style-type: none;
        line-height: 26px;
        display: block;
        overflow: hidden
    }

        .list_2 li a:link {
            color: #333;
            font-size: 16px;
            text-decoration: none
        }

        .list_2 li a:visited {
            color: #333;
            font-size: 16px;
            text-decoration: none
        }

        .list_2 li a:hover {
            text-decoration: underline
        }

#autosuggest_results {
    width: 260px;
    border: solid 1px #dedede;
    display: none;
    position: absolute;
    z-index: 9;
    background-color: #FFF
}

    #autosuggest_results ul, #autosuggest_results li {
        padding: 0;
        margin: 0;
        border: 0;
        list-style: none
    }

    #autosuggest_results li {
        border-top: solid 1px #dedede
    }

        #autosuggest_results li a {
            display: block;
            padding: 4px;
            text-decoration: none;
            color: #000;
            font-weight: bold
        }

            #autosuggest_results li a:hover {
                background: #ffc
            }

    #autosuggest_results ul {
        padding: 6px
    }

.xiaoshuomingkuang_biaoti {
    clear: both;
    color: #525252;
    border: 1px solid #fff;
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 10px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 5px
}

.xiaoshuomingkuang_neirong {
    clear: both;
    color: #525252;
    padding: 5px;
    border: 1px solid #d9d9d9;
    font-size: 14px;
    margin-top: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    line-height: 20px
}

.k_pagelist {
    clear: both;
    line-height: 30px
}

    .k_pagelist strong {
        padding: 2px;
        border: 1px solid #e7e7e7;
        font-size: 12px;
        margin: 0 1px;
        color: #090
    }

    .k_pagelist a {
        padding: 2px;
        border: 1px solid #e7e7e7;
        font-size: 12px;
        margin: 0 1px
    }

.all_an_1, .all_an_1:link, .all_an_1:visited {
    border: 1px solid #12afff;
    background-image: url(//f.51240.com/img/all_bg.png?v=20050301);
    background-repeat: repeat-x;
    background-position: 0 -319px;
    color: #FFF;
    cursor: pointer;
    height: 23px;
    line-height: 23px;
    display: inline-block;
    padding-top: 0;
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 5px;
    margin: 0;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.all_an_0, .all_an_0:link, .all_an_0:visited {
    border: 1px solid #c5c5c5;
    background-image: url(//f.51240.com/img/all_bg.png?v=20050301);
    background-repeat: repeat-x;
    background-position: 0 -343px;
    color: #333;
    cursor: pointer;
    height: 23px;
    line-height: 23px;
    display: inline-block;
    padding-top: 0;
    padding-right: 5px;
    padding-bottom: 0;
    padding-left: 5px;
    margin: 0;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
}

.all_an2_1 a {
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 4px;
    padding-right: 3px;
    padding-bottom: 4px;
    padding-left: 3px;
    font-size: 12px;
    color: #FFF;
    text-decoration: none;
    background-color: #86d7df;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #8acdd5;
    border-right-color: #8acdd5;
    border-bottom-color: #7dc8d0;
    border-left-color: #8acdd5;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: inline-block
}

    .all_an2_1 a:hover {
        background-color: #288d99;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 2px;
        border-left-width: 1px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #296a72;
        border-right-color: #296a72;
        border-bottom-color: #1c474d;
        border-left-color: #296a72
    }

.all_an2_0 {
    cursor: pointer;
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 4px;
    padding-right: 3px;
    padding-bottom: 4px;
    padding-left: 3px;
    font-size: 12px;
    color: #FFF;
    background-color: #288d99;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #296a72;
    border-right-color: #296a72;
    border-bottom-color: #1c474d;
    border-left-color: #296a72;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: inline-block
}

.all_an_lv {
    background-image: url(//f.51240.com/img/all_bg.png?v=20050301);
    background-repeat: repeat-x;
    background-position: 0 -0;
    height: 34px;
    font-size: 14px;
    color: #FFF;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #9bc162;
    border-right-color: #86a953;
    border-bottom-color: #86a953;
    border-left-color: #86a953;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding-right: 20px;
    padding-left: 20px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap
}

    .all_an_lv:hover, .all_an_lv:focus {
        background-position: 0 -34px
    }

.all_an_huang {
    background-image: url(//f.51240.com/img/all_bg.png?v=20050301);
    background-repeat: repeat-x;
    background-position: 0 -136px;
    height: 34px;
    font-size: 14px;
    color: #FFF;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #d98513;
    border-right-color: #a0620e;
    border-bottom-color: #a0620e;
    border-left-color: #a0620e;
    border-radius: 4px;
    padding-right: 20px;
    padding-left: 20px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap
}

    .all_an_huang:hover, .all_an_huang:focus {
        background-position: 0 -170px
    }

.all_an_hui {
    background-image: url(//f.51240.com/img/all_bg.png?v=20050301);
    background-repeat: repeat-x;
    background-position: 0 -68px;
    height: 34px;
    font-size: 14px;
    color: #949494;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #b9bfcc;
    border-right-color: #a4acbd;
    border-bottom-color: #a4acbd;
    border-left-color: #a4acbd;
    border-radius: 4px;
    padding-right: 20px;
    padding-left: 20px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    letter-spacing: 2px;
    cursor: pointer;
    white-space: nowrap
}

    .all_an_hui:hover, .all_an_hui:focus {
        background-position: 0 -102px
    }

.all_an_hong {
    background-image: url(//f.51240.com/img/all_bg.png?v=20050301);
    background-repeat: repeat-x;
    background-position: 0 -367px;
    height: 34px;
    font-size: 14px;
    color: #fff;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #e30000;
    border-right-color: #900;
    border-bottom-color: #900;
    border-left-color: #900;
    border-radius: 4px;
    padding-right: 20px;
    padding-left: 20px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    letter-spacing: 2px;
    cursor: pointer;
    white-space: nowrap
}

    .all_an_hong:hover, .all_an_hong:focus {
        background-position: 0 -401px
    }

.all_block {
    display: block;
    overflow: hidden
}

.all_none {
    display: none
}

.all_srk_1 {
    background-color: #FFF;
    color: #4b3d3d;
    height: 30px;
    padding-left: 4px;
    border: 1px solid #a9a9a9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.all_srk_0 {
    background-color: #f8f8f8;
    color: #4b3d3d;
    height: 30px;
    padding-left: 4px;
    border: 1px solid #c6c6c6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.all_srk_2 {
    background-color: #FFF;
    color: #4b3d3d;
    height: 30px;
    padding-left: 4px;
    border: 1px solid #eec47b;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.all_xl_1 {
    margin: 0;
    padding: 0;
    height: 24px;
    border: 1px solid #97c4e1
}

.all_xl_0 {
    margin: 0;
    padding: 0;
    height: 24px;
    border: 1px solid #c6c6c6
}

.charu_yc_url {
    display: block;
    width: 1px;
    overflow: hidden;
    text-indent: 1px;
    white-space: nowrap;
    float: left
}

.all_jiantou_zuo {
    background-image: url(//f.51240.com/img/all.png?v=17052205);
    background-repeat: no-repeat;
    background-position: -99px -39px;
    display: block;
    float: left;
    height: 31px;
    width: 35px;
    overflow: hidden
}

.all_jiantou_zuo_0 {
    background-image: url(//f.51240.com/img/all.png?v=17052205);
    background-repeat: no-repeat;
    background-position: -146px -39px;
    display: block;
    float: left;
    height: 31px;
    width: 35px;
    overflow: hidden
}

.all_jiantou_you {
    background-image: url(//f.51240.com/img/all.png?v=17052205);
    background-repeat: no-repeat;
    background-position: -99px -78px;
    display: block;
    float: right;
    height: 31px;
    width: 35px;
    overflow: hidden
}

.all_jiantou_you_0 {
    background-image: url(//f.51240.com/img/all.png?v=17052205);
    background-repeat: no-repeat;
    background-position: -146px -78px;
    display: block;
    float: left;
    height: 31px;
    width: 35px;
    overflow: hidden
}

.shuru_div {
    text-align: center;
    line-height: 38px
}

.shuru_div_jiange {
    margin-right: 10px
}

#loading_1_show {
    margin-right: auto;
    margin-left: auto;
    height: 108px;
    width: 198px;
    text-align: center;
    padding-top: 12px;
    background-color: #fbb655;
    font-size: 14px;
    color: #FFF;
    margin-top: 10px;
    margin-bottom: 60px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

    #loading_1_show img {
        color: #FFF;
        display: block;
        overflow: hidden;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 10px
    }

.qiehuankuang_1 {
    border: 1px solid #0ae;
    line-height: 30px;
    height: 30px;
    width: 280px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    overflow: hidden;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px
}

    .qiehuankuang_1 input, .qiehuankuang_1 span {
        background-color: #fff;
        line-height: 30px;
        height: 30px;
        display: block;
        overflow: hidden;
        float: left;
        width: 50%;
        text-align: center;
        border: 0 solid #FFF;
        cursor: pointer;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px
    }

    .qiehuankuang_1 .qiehuankuang_1_dq, .qiehuankuang_1 .qiehuankuang_1_dq a {
        color: #fff;
        background-color: #0ae;
        cursor: auto
    }

    .qiehuankuang_1 a {
        text-decoration: none
    }

.you_xia_jiao {
    overflow: visiable;
    position: fixed;
    z-index: 101;
    display: block;
    bottom: 0;
    left: 50%;
    margin-left: 520px;
    _position: absolute
}

    .you_xia_jiao .xiao_fang_kuai_weixin {
        width: 100px;
        display: block;
        margin-bottom: 8px;
        margin-left: 8px;
        text-align: center
    }

        .you_xia_jiao .xiao_fang_kuai_weixin span {
            color: #063;
            line-height: 30px;
            font-weight: bold
        }

    .you_xia_jiao .xiao_fang_kuai a {
        width: 38px;
        height: 38px;
        display: block;
        margin-bottom: 8px;
        margin-left: 8px;
        background-image: url(//f.51240.com/img/all.png?v=17052205);
        background-repeat: no-repeat
    }

    .you_xia_jiao .xiao_fang_kuai .xiao_fang_kuai_top {
        background-position: 0 -32px
    }

        .you_xia_jiao .xiao_fang_kuai .xiao_fang_kuai_top:hover {
            background-position: -50px -32px
        }

    .you_xia_jiao .xiao_fang_kuai .xiao_fang_kuai_liu_yan {
        background-position: 0 -72px
    }

        .you_xia_jiao .xiao_fang_kuai .xiao_fang_kuai_liu_yan:hover {
            background-position: -50px -72px
        }

.pmk_1040_show {
    display: none
}

.pmk_api_show {
    display: none
}

.pmk_sj_show {
    display: none
}

.pmk_990_show {
    display: block
}

.pmk_1040_table_cell {
    display: none
}

.pmk_api_table_cell {
    display: none
}

.pmk_sj_table_cell {
    display: none
}

.pmk_990_table_cell {
    display: table-cell
}

.pmk_1040_inline {
    display: none
}

.pmk_api_inline {
    display: none
}

.pmk_sj_inline {
    display: none
}

.pmk_990_inline {
    display: inline
}

效果图：
在这里插入图片描述

搜索贵州：

在这里插入图片描述

你的美，让我痴迷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
腾讯地图的初步使用

@{ ViewBag.Title = "MapTest";}<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=4OSBZ-ZZCKW-AUZRA-O6OXD-MTWZQ-RZBF5&libraries=drawing,geometry,autocomplete,convertor"></script> <script src="~/Content/ods/js/
复制链接

扫一扫