layui引入百度地图

 

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>
<script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<body><div class="layui-fluid"><!--地图显示位置--><div class="layui-row"><div id="l-map" style="height: 810px;width: 1666px"></div></div>
</div>
<script>// 百度地图API功能var map = new BMapGL.Map("l-map");map.centerAndZoom(new BMapGL.Point(119.506999,39.90779), 13);map.enableScrollWheelZoom(true);$.ajax({url: "/admin/ceshi/map_ceshi",type: 'get',dataType: 'json',success: function (adds) {for(var i = 0; i<adds.length; i++){var point = new BMapGL.Point(adds[i].lng, adds[i].lat);var marker = new BMapGL.Marker(point);map.addOverlay(marker);marker.setLabel(new BMapGL.Label(adds[i].name,{offset:new BMapGL.Size(10,-10)}));}},});
</script>
</body>
接口/admin/ceshi/map_ceshi
adds读出的数据格式为数组:
[{"id": 1,"name": "35624便利店","lng": "119.63569","lat": "39.945388"},{"id": 2,"name": "利群超市","lng": "119.548496","lat": "39.933055"}
]

获取AK是需要注册一个百度地图开放平台账号,链接地址:

百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/70358.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

看涨期权计算例题(期权案例计算)

看涨期权又称认购期权&#xff0c;买进期权&#xff0c;买方期权&#xff0c;买权&#xff0c;延买期权&#xff0c;或“敲进”&#xff0c;是指期权的购买者拥有在期权合约有效期内按执行价格买进一定数量标的物的权利&#xff0c;下文为大家科普看涨期权计算例题&#xff08;…

RabbitMQ的RPM包安装和Python读写操作

下载地址 ## erlang 下载地址 https://packagecloud.io/rabbitmq/erlang?page6## rabbitmq 下载地址 https://packagecloud.io/rabbitmq/rabbitmq-server/packages/el/7/rabbitmq-server-3.8.29-1.el7.noarch.rpm?distro_version_id140 Rabbitmq的RPM包安装 ## 下载 wget -…

LLVM 与代码混淆技术

项目源码 什么是 LLVM LLVM 计划启动于2000年&#xff0c;开始由美国 UIUC 大学的 Chris Lattner 博士主持开展&#xff0c;后来 Apple 也加入其中。最初的目的是开发一套提供中间代码和编译基础设施的虚拟系统。 LLVM 命名最早源自于底层虚拟机&#xff08;Low Level Virtu…

ComfyUI 安装

背景&#xff1a; stable diffussion XL最先适配&#xff0c;专业性强的SD操作界面 安装步骤&#xff1a; git clone GitHub - comfyanonymous/ComfyUI: A powerful and modular stable diffusion GUI with a graph/nodes interface. 1、pip install torch torchvision torc…

window11,C盘瘦身减肥技巧

前言 本文主要说明windows11的C盘空间优化技巧&#xff0c;也叫减肥瘦身&#xff0c;目标&#xff1a;20G以内。绝大部分内容&#xff0c;也适用于window10和windows7&#xff0c;只是操作系统不同&#xff0c;操作方式略有不同。不关注C盘空间的读者&#xff0c;可以忽略此文…

2023年数维杯数学建模A题河流-地下水系统水体污染研求解全过程文档及程序

2023年数维杯数学建模 A题 河流-地下水系统水体污染研 原题再现&#xff1a; 河流对地下水有着直接地影响&#xff0c;当河流补给地下水时&#xff0c;河流一旦被污染&#xff0c;容易导致地下水以及紧依河流分布的傍河水源地将受到不同程度的污染&#xff0c;这将严重影响工…

iBooker 技术评论 20230902

一、女子同时供职 16 家公司却从不上班&#xff0c;全国骗薪群体至少有七八百人&#xff0c;为何会出现此类骗薪群体&#xff1f; 社保其实很好绕过。就是这些骗薪者一起创立一个外包公司&#xff0c;然后通过这个公司把自己外包出去。这些人和外包公司签的是劳务合同&#xf…

sentinel加密狗使用及规则配置

Sentinel加密狗是一种硬件加密设备&#xff0c;用于保护软件应用程序免受未经授权的访问和复制。它可以提供软件许可管理、访问控制和数据保护等功能。下面是Sentinel加密狗的使用及规则配置的相关介绍。 Sentinel加密狗的使用 插入加密狗&#xff1a;将Sentinel加密狗插入计算…

基于语雀编辑器的在线文档编辑与查看

概述 语雀是一个非常优秀的文档和知识库工具&#xff0c;其编辑器更是非常好用&#xff0c;虽无开源版本&#xff0c;但有编译好的可以使用。本文基于语雀编辑器实现在线文档的编辑与文章的预览。 实现效果 实现 参考语雀编辑器官方文档&#xff0c;其实现需要引入以下文件&…

【Ptyhon】关于自定义对象的Json序列化和反序列化

背景 最近使用Ptyon爬虫数据时&#xff0c;遇到对象无法转换为JSON序列化对象问题TypeError: Object of type Main is not JSON serializable 意思&#xff1a; 就是对象不能转换为JSON序列化对象 原因&#xff1a; 是对象没有自定义实现转换为JSON序列化对象的方法没有。 实…

centos的环境配置

YUM仓库配置 安装阿里云的base源与EPEL源 仓库和常用命令 rm -f /etc/yum.repos.d/*.repo curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo curl -o /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo yum c…

计算机语言知识点梳理

变量大小写区分 不区分大小 htmlcsssql 区分大小写 javajavascriptpythontypescriptc 弱类型语言和强类型语言 强类型语言 强类型语言也称为强类型定义语言。是一种总是强制类型定义的语言&#xff0c;要求变量的使用要严格符合定义&#xff0c;所有变量都必须先定义后使用…

Google Earth Engine 的缺点和限制

随着 Google Earth Engine 在地球科学和数据计算领域越来越流行&#xff0c;网上有很多介绍Google Earth Engine 的文章及 Google Earth Engine的追随者。Google Earth Engine确实是一款伟大的产品&#xff0c;我们应该为其点赞。但由于已经有太多人在热捧了&#xff0c;我这里…

数据库设计:防止MySQL字段名与关键字相撞,保护数据完整性!

MySQL是一款广泛应用的关系型数据库管理系统&#xff0c;对于数据库设计而言&#xff0c;字段名的选择是至关重要的一环。不小心选择了和MySQL关键字相同的字段名可能导致严重的数据完整性问题。下面将深入探讨如何防止MySQL字段名与关键字相撞&#xff0c;以保护数据的完整性。…

应用程序分类与相关基本概念介绍

0、引言 在从事软件开发的过程中&#xff0c;由于笔者并不是计算机专业的同学&#xff0c;所以时常会对一些概念感到困惑。比如&#xff1a; 前些年很火的前端和后端是什么意思&#xff1f;什么是 GUI&#xff1f;什么是 CLI&#xff1f;计算机的应用程序分为哪些种类&#x…

报错: “Data is Null. This method or property cannot be called,解决方法

在进行导入的时候报错 System.Data.SqlTypes.SqlNullValueException: "Data is Null. This method or property cannot be called on Null values."是一个在使用DataReader.GetString(i)方法时出现的异常情况。当对应字段的值为Null时&#xff0c;这个方法会抛出异常…

用户案例 | 蜀海供应链基于 Apache DolphinScheduler 的数据表血缘探索与跨大版本升级经验

导读 蜀海供应链是集销售、研发、采购、生产、品保、仓储、运输、信息、金融为一体的餐饮供应链服务企业。2021年初&#xff0c;蜀海信息技术中心大数据技术研发团队开始测试用DolphinScheduler作为数据中台和各业务产品项目的任务调度系统工具。本文主要分享了蜀海供应链在海…

【Node.js】—基本知识点总结

【Node.js】—基本知识总结 一、命令行常用操作 二、Node.js注意点 Node.js中不能使用BOM和DOM操作 总结 三、Buffer buffer是一个类似于数组的对象&#xff0c;用于表示固定长度的字节序列buffer的本质是一段内存空间&#xff0c;专门用来处理二进制数据 特点&#xff1a;…

postgresql-子查询

postgresql-子查询 子查询简介派生表IN 操作符ALL 操作符ANY 操作符关联子查询横向子查询EXISTS 操作符 子查询简介 子查询&#xff08;Subquery&#xff09;是指嵌套在其他 SELECT、INSERT、UPDATE 以及 DELETE 语句中的 查询语句 子查询的作用与多表连接查询有点类似&#x…

ElementUI浅尝辄止18:Avatar 头像

用图标、图片或者字符的形式展示用户或事物信息。 常用于管理系统或web网站的用户头像&#xff0c;在用户账户模块更换头像操作也能看到关于Avatar组件的应用。 1.如何使用&#xff1f; 通过 shape 和 size 设置头像的形状和大小。 <template><el-row class"de…