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

来源：互联网发布：java des加密工具类编辑：程序博客网时间：2024/06/06 03:13

这里我引用的是百度地图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>

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

阅读全文

0 0