创建百度地图，设置地图缩放，设置标注，添加信息窗口

最新推荐文章于 2023-04-12 13:15:48 发布

ProjectNo

最新推荐文章于 2023-04-12 13:15:48 发布

阅读量4.7k

点赞数 2

分类专栏：前端文章标签：百度地图 api 标注地图缩放信息窗口

本文链接：https://blog.csdn.net/projectNo/article/details/78030492

版权

前端专栏收录该内容

17 篇文章 4 订阅

订阅专栏

这里我引用的是百度地图1.4api，因为1.4以下的不需要密钥，但是有的功能不支持，不过基本的功能都支持，代码如下：

<!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{width:100%;height:900px;}
        p{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <title>BMap</title>
</head>
<body>
    <div id="allmap"></div>
    <p>点击标注点，可查看由纯文本构成的简单型信息窗口</p>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");//声明地图map容器
    var point = new BMap.Point(116.417854,39.921988); //初始化一个经纬度点
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中
    map.centerAndZoom(point, 15);       //初始化地图设置中心点，设置级别（1~20）
    map.enableScrollWheelZoom(true);    //设置地图可以缩放
    var opts = {
      width : 200,     // 信息窗口宽度
      height: 100,     // 信息窗口高度
      title : "海底捞王府井店" , // 信息窗口标题
      enableMessage:true,//设置允许信息窗发送短息
      message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
    }
    var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
    marker.addEventListener("click", function(){          
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    });
</script>

这里写图片描述
这里只是其中一小部分功能，详情请查看百度地图开放平台，或使用百度地图生成器工具

ProjectNo

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
创建百度地图，设置地图缩放，设置标注，添加信息窗口

这里我引用的是百度地图1.4api，因为1.4以下的不需要密钥，但是有的功能不支持，不过基本的功能都支持，代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="init
复制链接

扫一扫