百度地图api初步使用

第一次使用百度地图api, 写完从项目中扒下来的部分代码, 目的是总结一下api, 仅供参考

// 实例化
var map = new BMap.Map('id'); 

// 在地图上定位到某点
var point = new BMap.Point(116.417854,39.921988); 

// 初始化地图;设置中心点坐标和地图级别
map.centerAndZoom(point, 15);

// 开启鼠标滚轮缩放
map.enableScrollWheelZoom(true)

// 清除图层覆盖物
map.clearOverlays();

// 设置标注
    // 创建图标
    let icon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(20, 25), {  
        imageOffset: new BMap.Size(0, 0 - 10 * 30) // 设置图片偏移  
    });
    // 创建标注
    let marker = new BMap.Marker(point, {
        icon
    });
    marker.setTop('true');
    // 添加到地图
    map.addOverlay(marker);

    // 标注信息
    let opts = {
        width: 0, // 信息窗口宽度
        height: 0, // 信息窗口高度
        title: "<span style='width:100%;text-align: center;display: block;'>"+"标题"+"</span>",
        message: "内容"
    }
    let infoWindow = new BMap.InfoWindow('', opts); // 创建信息窗口对象
    marker.addEventListener('click', function() {
        map.openInfoWindow(infoWindow, point) // 开启信息窗口
    })

    // 创建搜索类实例
    let local = new BMap.LocalSearch(
        map, 
        {
          renderOptions: {
            map: map,
            autoViewport: false,
            panel: "r-result"
          },
          onSearchComplete: function(results) {            
            // 包含周边位置信息
            console.log(results)
            let list = results.Hr
            callback(list)
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        }
    })
    
    local.disableFirstResultSelection();//禁用自动选择第一个检索结果
    // 发起周边搜索
    local.searchNearby(type, point, 1000);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值