当前位置: 首页 > news >正文

WEB使用百度地图展示某地地址

第一步 进入百度地图开发平台 

百度地图开放平台 | 百度地图API SDK | 地图开发

 第二步注册 获取AK秘钥,点击【创建应用】进入AK申请页面,填写应用名称,务必选择AK类型为“浏览器端”,JS API只支持浏览器端AK进行请求与访问

 下面的这个就是AK秘钥

第三步 就是在HTML文件中创建一个div元素,用于显示地图。

第四步 在JS文件中编写代码,调用百度地图API的相关函数,实现地图的展示和标注。

下面这个就是在页面中引用申请的秘钥

    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>

 效果图

页面代码如下:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>获取信息窗口内容</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
</head><body><div id="Map" style="width: 600px;height: 500px;"></div>
</body></html>
<script>var map = new BMapGL.Map('Map');// 创建Map实例var point = new BMapGL.Point(116.404, 39.915); // 初始化地图,设置中心点坐标和地图级别map.centerAndZoom(point, 15);var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件map.addControl(zoomCtrl);// 创建点标记var marker = new BMapGL.Marker(point);map.addOverlay(marker);// 创建信息窗口var opts = {width: 200,height: 100,title: '故宫博物院'};var infoWindow = new BMapGL.InfoWindow('地址:北京市东城区王府井大街88号乐天银泰百货八层', opts);map.openInfoWindow(infoWindow, point); // 开启信息窗口function getInfoContent() {alert(infoWindow.getContent());}var map = new AMap.Map('allmap', {zoom: 14,zoomEnable: true,scrollWheel: false,center: [113.360435, 23.101970],lang: "zh_cn" //可选值:en,zh_en, zh_cn});</script>

百度地图 地址经纬度拾取地址如下链接:

拾取坐标系统

http://www.lryc.cn/news/208073.html

相关文章:

  • 22年上半年下午题
  • 大文件分片上传-续传-秒传(详解)
  • CE-LVD证书跟CE-EMC证书有什么区别?
  • 使用Mapster实现双向映射,解放搬砖体力活
  • 一种基于屏幕分辨率的RTSP主子码流切换的多路视频监控的播放方案
  • SpringBoot日志+SpringMVC+UUID重命名文件+Idea热部署
  • 向日葵远程控制中的键盘异常问题
  • 【iOS免越狱】利用IOS自动化web-driver-agent_appium-实现自动点击+滑动屏幕
  • 聊聊“JVM 调优JVM 性能优化”是怎么个事?
  • 再获Gartner认可!持安科技获评ZTNA领域代表供应商
  • 微服务-Feign
  • jsp获取数据 jsp直接获取后端数据 获取input选中的值 单选 没 checked属性
  • React 中 keys 的作用是什么?
  • 代码随想录 | Day46
  • word行内插入mathtype 公式后行距变大解决办法
  • 直播预告 | YashanDB 2023年度发布会正式定档11月2日,邀您共同见证国产数据库发展实践!
  • 一文读懂WebClient和RestTemplate的差异
  • 如何使用SpringBoot处理全局异常
  • 【2023CANN训练营第二季】——通过一份入门级算子开发代码了解Ascend C算子开发流程
  • 建模仿真软件 Comsol Multiphysics mac中文版软件介绍
  • 深入理解强化学习——强化学习的历史:近代强化学习的发展
  • 移动端ViT新利器!苹果提出稀疏专家混合模型Mobile V-MoEs
  • 【linux系统】服务器安装Pycharm
  • 便利连锁:如何增加收益?教你一招轻松搞定!
  • STM32-程序占用内存大小计算
  • 鱼眼图像去畸变python / c++
  • 文心一言简单体验
  • css正确的语法
  • 【PG】PostgresSQL角色管理
  • 百度智能云获评Forrester中国市场人工智能/机器学习平台领导者