Javascript

js 百度地图api

本文主要是介绍js 百度地图api，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
<!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>
这篇关于js 百度地图api的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航