百度地图定位以及创建信息窗口

理想和远方_在路上

已于 2023-07-05 14:52:10 修改

阅读量375

点赞数

文章标签：百度地图

于 2023-06-19 09:59:57 首次发布

本文链接：https://blog.csdn.net/weixin_38822843/article/details/131281502

版权

目标：在百度地图上展示校区的名称，地址，增加信息窗口，信息窗口增加两个按钮，按钮可以点击可以实现交互

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>思润教育小寨校区</title>
  <style type="text/css">
    html,body,#allmap{height:100%; margin:0;font-family:"微软雅黑";}
    #btnContainer {
      margin-top: 10px;
    }
    button {
      margin-right: 10px;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak"></script>
</head>
<body>
  <div id="allmap"></div>
  <script type="text/javascript">
    // 创建地图实例
    var map = new BMap.Map("allmap");
    //默认启用滚轮放大缩小
    map.enableScrollWheelZoom();
    // 创建坐标点对象
    var point = new BMap.Point(108.94716, 34.222307);
    // 添加标注
    var marker = new BMap.Marker(point);
    map.addOverlay(marker);
    // 设定中心点和缩放级别
    map.centerAndZoom(point, 18);
    // 创建信息窗口
	var content = `<div style="font-size:14px;">思润教育小寨校区<br/>地址：西安市雁塔区小寨国贸中心22层<br/><div id="btnContainer"><button onclick="sendPhone()">发送手机</button><button onclick="openChat()">在线咨询</button></div></div>`;
    var infoWindow = new BMap.InfoWindow(content,{enableMessage: false});
    // 绑定点击事件，打开信息窗口
    marker.addEventListener("click", function() {
        this.openInfoWindow(infoWindow);
    });
    // 打开信息窗口
    marker.openInfoWindow(infoWindow);
    // 发送手机
    function sendPhone() {
      alert('发送手机');
    }
    // 在线咨询
    function openChat() {
      alert('在线咨询');
    }
  </script>
</body>
</html>

# 默认启用滚轮放大缩小

map.enableScrollWheelZoom();

理想和远方_在路上

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度地图定位以及创建信息窗口

百度地图定位以及创建信息窗口，在百度地图上展示校区的名称，地址，增加信息窗口，信息窗口增加两个按钮，按钮可以点击可以实现交互。默认启用滚轮放大缩小 map.enableScrollWheelZoom();
复制链接

扫一扫