百度地图搜索、标注地图示例

最新推荐文章于 2023-02-14 03:00:00 发布

lwx2615

最新推荐文章于 2023-02-14 03:00:00 发布

阅读量8.7k

点赞数

分类专栏：为了忘却

本文链接：https://blog.csdn.net/lwx2615/article/details/9833577

版权

由于要做一个搜索标注地图的功能，选择了百度地图的一个示例：
<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=uft-8">
        <title>采集坐标 </title>
        <!--[if IE 6]>
            <script type="text/javascript" src="http://dev.baidu.com/wiki/static/map/tuan/js/DD_belatedPNG_0.0.8a-min.js"></script>
            <script>DD_belatedPNG.fix("#float_search_bar");</script>
       <![endif]-->
       <style>
            #preview{
                border: 1px solid #bfd2e1;
                width: 490px;
                height: 368px;
                font-family: Arial, Helvetica, sans-serif,"宋体";
            }
            #map_container{
                height: 368px;
            }
            #float_search_bar{
                z-index: 2012;
                position: absolute;
                width: 480px;
                height: 31px;
                background: url("http://dev.baidu.com/wiki/static/map/tuan/images/search_bar.png") repeat-x;
                background-position: 0 -21px;
                padding: 3px 0 0 10px;
            }
            #float_search_bar label, #float_search_bar span{
                color: #0787cb;
                font-size: 14px;
            }
            #float_search_bar input{
                width: 180px;
                height: 16px;
                margin-top: 1px;
            }
            #float_search_bar input:focus{
                outline: none;
            }
            #float_search_bar button{
                bord