使用百度API创建图片标注和添加导航

最新推荐文章于 2022-11-14 10:10:06 发布

chusa7588

最新推荐文章于 2022-11-14 10:10:06 发布

阅读量504

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3717557/blog/1812505

版权

一、首先确定我们的地图中心点、以及我们要添加标注的地方，在这里我选择以贵州黄果树瀑布为例

var poi = new BMap.Point(105.681847,25.986287);//确定地图中心点

二、在这里我们写了四个样式，一个默认样式以及三个可选样式，展示了不同的内容以及功能。

在每一个样式下我们都需要添加内容，每一个样式都是以一个新的窗口进行显示

默认样式

//创建检索信息窗口对象
    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可拖拽
    marker.addEventListener("click", function(e){
        searchInfoWindow.open(marker);
    })
    map.addOverlay(marker); //在地图中添加marker

样式一

var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "黄果树大瀑布以水势浩大著称，属喀斯特地貌中的侵蚀裂典型瀑布，雄伟壮观", {
        title: "黄果树瀑布", //标题
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[
            BMAPLIB_TAB_FROM_HERE, //从这里出发
            BMAPLIB_TAB_SEARCH   //周边检索
        ]
    });
    function openInfoWindow1() {
        searchInfoWindow1.open(new BMap.Point(105.681847,25.986287));
    }

3. 样式二、样式三与一除显示的功能外写法基本一致，不在赘述。

三、附上源码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
    #allmap {height: 500px;width:100%;overflow: hidden;}
    #result {width:100%;font-size:12px;}
    dl,dt,dd,ul,li{
        margin:0;
        padding:0;
        list-style:none;
    }
    dt{
        font-size:14px;
        font-family:"微软雅黑";
        font-weight:bold;
        border-bottom:1px dotted #000;
        padding:5px 0 5px 5px;
        margin:5px 0;
    }
    dd{
        padding:5px 0 0 5px;
    }
    li{
        line-height:28px;
    }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eZIflp2p4gzYF6E9O5H9EKyq471ic4cB"></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" />
    <title>带检索功能的信息窗口</title>
</head>
<body>
    <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(105.681847,25.986287);
    map.centerAndZoom(poi, 16);
    map.enableScrollWheelZoom();

    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    '<img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=467e6c784ced2e73e8e48e7ee668caee/a8ec8a13632762d087072743a6ec08fa513dc615.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                    '地址：安顺市镇宁布依族苗族自治县黄果树镇<br/>电话：8008208820<br/>简介：黄果树大瀑布以水势浩大著称，属喀斯特地貌中的侵蚀裂典型瀑布，雄伟壮观。' +
                  '</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可拖拽
    marker.addEventListener("click", function(e){
        searchInfoWindow.open(marker);
    })
    map.addOverlay(marker); //在地图中添加marker
    //样式1
    var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "黄果树大瀑布以水势浩大著称，属喀斯特地貌中的侵蚀裂典型瀑布，雄伟壮观", {
        title: "黄果树瀑布", //标题
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[
            BMAPLIB_TAB_FROM_HERE, //从这里出发
            BMAPLIB_TAB_SEARCH   //周边检索
        ]
    });
    function openInfoWindow1() {
        searchInfoWindow1.open(new BMap.Point(105.681847,25.986287));
    }
    //样式2
    var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "黄果树大瀑布以水势浩大著称，属喀斯特地貌中的侵蚀裂典型瀑布，雄伟壮观", {
        title: "黄果树瀑布", //标题
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[
            BMAPLIB_TAB_SEARCH   //周边检索
        ]
    });
    function openInfoWindow2() {
        searchInfoWindow2.open(new BMap.Point(105.681847,25.986287));
    }
    //样式3
    var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "黄果树大瀑布以水势浩大著称，属喀斯特地貌中的侵蚀裂典型瀑布，雄伟壮观", {
        title: "黄果树瀑布", //标题
        width: 290, //宽度
        height: 40, //高度
        panel : "panel", //检索结果面板
        enableAutoPan : true, //自动平移
        searchTypes :[
        ]
    });
    function openInfoWindow3() {
        searchInfoWindow3.open(new BMap.Point(105.681847,25.986287)); 
    }
</script>
</body>
</html>

转载于:https://my.oschina.net/u/3717557/blog/1812505

chusa7588

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用百度API创建图片标注和添加导航

一、首先确定我们的地图中心点、以及我们要添加标注的地方，在这里我选择以贵州黄果树瀑布为例 var poi = new BMap.Point(105.681847,25.986287);//确定地图中心点二、在这里我们写了四个样式，一个默认样式以及三个可选样式，展示了不同的内容以及功能。 ...
复制链接

扫一扫