百度地图的调用

最新推荐文章于 2022-03-23 14:47:58 发布

爱登山的十一

最新推荐文章于 2022-03-23 14:47:58 发布

阅读量313

点赞数 1

分类专栏：百度地图文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47938783/article/details/106494326

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html

<div class="map" id="map"></div>

css

.map {
    width: 100%;
    height: 420px;
    margin-top: 46px;
    margin-bottom: 68px;
}

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7d3a4c6e5e8a70dd200a2eeacf8c1b50"></script>
<script>
    // 百度地图API功能
    var map = new BMap.Map("map");
    var point = new BMap.Point(103.819108, 30.710824);
    var marker = new BMap.Marker(point, {
        icon: new BMap.Icon("res/default/images/logo.png", new BMap.Size(130, 130))
    })
    map.addOverlay(marker); // 将标注添加到地图中
    map.centerAndZoom(point, 15);
    map.disableScrollWheelZoom();
    marker.setAnimation(BMAP_ANIMATION_BOUNCE);

    var mapStyle = {
        features: ["road", "building", "water", "land"], //隐藏地图上的poi
        style: "light" //设置地图风格为高端黑
    }
    map.setMapStyle(mapStyle);

    var opts = {
        width: 228, // 信息窗口宽度
        height: 150, // 信息窗口高度
        title: "<p><b style='color:red;'>四川省残疾人艺术团</b></p>", // 信息窗口标题
        enableMessage: true
    }
    var infoWindow = new BMap.InfoWindow("地址：${webSet.comAddress}） <br><p>电话：${webSet.tel}</p><br><p>E-mail:${webSet.comEmail}</p>", opts); // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
    marker.addEventListener("click", function () {
        map.openInfoWindow(infoWindow, point);
    });
</script>