<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 百度地图 --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=c7WF4ji8XvvAadFEyX7zTVRWijpoOwUp"></script> <style> html, body { margin: 0; padding: 0; height: 100%; } #app { width: 100%; height: 100%; } </style> </head> <body> <div id="app"></div> </body> <script> const map = window.map = new BMap.Map("app") // 创建地图实例 var poi = new BMap.Point(113.843319, 22.921901) // 开启鼠标滚轮缩放 map.enableScrollWheelZoom(true) // 创建点坐标（东莞全貌） map.centerAndZoom(poi, 12) // 单击只是为了获取点击的经纬度 map.addEventListener("click", e => { const data = map.pointToPixel(e.point) // {x: 508, y: 84} console.log(20200805154515, data) }) </script> </html>