js 百度地图api

2021-10-26 23:02:38 阅读：166 来源： 互联网

标签：检索 map js var api marker new 百度 panel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7mIEAV9StD8UEWv4Gi57G4fU"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
    <style>
        #allmap{margin:55px auto;width:1050px;height:500px;}
        #result{@extend .W100;font-size:12px;}
        #allmap dt{font-size:14px;font-weight:bold;border-bottom:1px dotted #000;padding:5px 0 5px 5px;margin:5px 0;}
        #allmap dd{padding:5px 0 0 5px;}
        #allmap li{line-height:28px;}

    </style>
</head>
<body>
<div class="w12">
    <div id="allmap">
    </div>
    <div id="result">
        <input type="button" value="默认样式" onclick="searchInfoWindow.open(marker);"/>
        <input type="button" value="样式1" onclick="openInfoWindow1()"/>
        <input type="button" value="样式2" onclick="openInfoWindow2()"/>
        <input type="button" value="样式3" onclick="openInfoWindow3()"/>
    </div>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map('allmap');
        var poi = new BMap.Point(116.483698,39.936311);
        map.centerAndZoom(poi, 16);
        map.enableScrollWheelZoom();

        var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
            '<img src="images/map.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
            '北京市朝阳区水碓子北里万科东第1号楼底商<br/>【北京华悦府医疗美容医院】<br/>电话：13718893052 '+'</div>';

        //创建检索信息窗口对象
        var searchInfoWindow = null;
        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title  : "华悦府",      //标题
            width  : 290,             //宽度
            height : 105,              //高度
            panel  : "panel",         //检索结果面板
            enableAutoPan : true,     //自动平移
            searchTypes   :[
                BMAPLIB_TAB_SEARCH,   //周边检索
                BMAPLIB_TAB_TO_HERE,  //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        });
        var marker = new BMap.Marker(poi); //创建marker对象
        marker.enableDragging(); //marker可拖拽
        searchInfoWindow.open(marker);
        marker.addEventListener("click", function(e){
            searchInfoWindow.open(marker);
        });
        map.addOverlay(marker); //在地图中添加marker
        //样式1
        var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
            title: "信息框1", //标题
            panel : "panel", //检索结果面板
            enableAutoPan : true, //自动平移
            searchTypes :[
                BMAPLIB_TAB_FROM_HERE, //从这里出发
                BMAPLIB_TAB_SEARCH   //周边检索
            ]
        });
        function openInfoWindow1() {
            searchInfoWindow1.open(new BMap.Point(116.483698,39.936311));
        }
        //样式2
        var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", {
            title: "信息框2", //标题
            panel : "panel", //检索结果面板
            enableAutoPan : true, //自动平移
            searchTypes :[
                BMAPLIB_TAB_SEARCH   //周边检索
            ]
        });
        function openInfoWindow2() {
            searchInfoWindow2.open(new BMap.Point(116.483698,39.936311));
        }
        //样式3
        var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {
            title: "信息框3", //标题
            width: 290, //宽度
            height: 40, //高度
            panel : "panel", //检索结果面板
            enableAutoPan : true, //自动平移
            searchTypes :[
            ]
        });
        function openInfoWindow3() {
            searchInfoWindow3.open(new BMap.Point(116.483698,39.936311));
        }
    </script>
</div>
</body>
</html>

标签：检索,map,js,var,api,marker,new,百度,panel
来源： https://www.cnblogs.com/anans/p/15468357.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js 百度地图api