百度地图添加控件

最新推荐文章于 2023-09-12 18:44:59 发布

&蓝瘦&

最新推荐文章于 2023-09-12 18:44:59 发布

阅读量439

点赞数

分类专栏： map 文章标签：百度地图控件

本文链接：https://blog.csdn.net/weixin_42303013/article/details/102588912

版权

map 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

添加控件

添加搜索控件,输入关键字,在一定范围内,标注出搜索结果

//这个类,我还搞不太清楚,有懂的大佬,希望能分享分享

 var local = new BMap.LocalSearch(
            map,
            {
                renderOptions : {
                    map : map,
                },pageCapacity : 80
            });

下面是实际例子的代码

<!DOCTYPE html>
<html>
<head lang="en">
    <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{width:100%;height:100%;}
        .customOverlay {
            background: #4FA5FC;
            width: 100px;
            height: 90px;
            position: absolute;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=C82d7da3e34f78ff2fc7ab9d6b0714e2"></script>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 初始化地图
    var map = new BMap.Map("allmap", { mapType: BMAP_NORMAL_MAP });             // 创建Map实例
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 11);
    map.enableScrollWheelZoom();

    // 定义一个控件类,即function
    function ZoomControl() {
        this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
        this.defaultOffset = new BMap.Size(10, 10);
    }
    // 通过JavaScript的prototype属性继承于BMap.Control
    ZoomControl.prototype = new BMap.Control();
    // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
    // 在本方法中创建个p元素作为控件的容器,并将其添加到地图容器中
    ZoomControl.prototype.initialize = function(map){
        // 创建一个DOM元素
        var p = document.createElement("p");
        p.innerHTML = '<p id="r-result">搜索地址:<input type="text" id="suggestId" size="20" value="百度地图" style="width:150px;" /><input type="button" size="20" value="确定" style="width:50px; margin-left: 4px" οnclick="searchr()"/></p><p id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></p>';
        // 添加DOM元素到地图中
        map.getContainer().appendChild(p);
        // 将DOM元素返回
        return p;
    }
    // 创建控件
    var myZoomCtrl = new ZoomControl();
    // 添加到地图当中
    map.addControl(myZoomCtrl);

    var suggestId = "";
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {
                "input" : "suggestId",
                "location" : map
            });
    ac.addEventListener("onmouseout",function(e) {
        alert("asdfad");
    })
    //以point为圆心1公里半径为范围(设置覆盖物)
    var circle = new BMap.Circle(point,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle);
    circle.disableMassClear();
    var ResultArray = [];
    //这个类,我还搞不太清楚,有懂的大佬,希望能分享分享
    var local = new BMap.LocalSearch(
            map,
            {
                renderOptions : {
                    map : map,
                },pageCapacity : 80

            });
    //默认是餐饮
    var search = "餐饮";
    local.searchNearby(search,point,900);
    function searchr(){
        search  =  document.getElementById("suggestId").value;
        //重新周边加载
        local.searchNearby(search,point,900);
    }
</script>

效果图

&蓝瘦&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图添加控件

添加控件添加搜索控件,输入关键字,在一定范围内,标注出搜索结果//这个类,我还搞不太清楚,有懂的大佬,希望能分享分享 var local = new BMap.LocalSearch( map, { renderOptions : { map : map, ...
复制链接

扫一扫