uniapp H5端使用百度地图

1、登录百度地图开放平台 https://lbsyun.baidu.com/(没有账号则先去创建一个百度账号)

2、进入百度地图开放平台控制台(导航栏“控制台”),点击“应用管理”-“我的应用”

3、选择“创建应用”,应用模块选择“浏览器端”。创建成功后你就得到一个百度地图AK。

4、接下来就可以开始使用了

首先在index.html页面引入百度地图API

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=你的AK"></script>

正式开写,显示地图,并给地图添加标记点,点击标记点显示地址信息

<template><div id='container'></div>
</template><script>export default {data() {return {// 标记点列表markerList: [{id: 1,longitude: 116.404,latitude: 39.915,title: "天安门",address: "北京市天安门广场"}, {id: 2,longitude: 116.404,latitude: 39.925,title: "故宫博物馆",address: "北京市故宫博物馆"}];}},mounted() {this.initMap();},methods: {initMap() {var map = new BMapGL.Map("container"); // 创建地图实例var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.setHeading(64.5); //设置地图旋转角度map.setTilt(73); //设置地图的倾斜角度// 创建点标记图标var markerIcon = new BMapGL.Icon("icon.png", new BMapGL.Size(23, 26));// 批量添加点标记this.markerList.forEach(item => {var markerPoint = new BMapGL.Point(item.longitude, item.latitude);var marker = new BMapGL.Marker(markerPoint, {icon: markerIcon});map.addOverlay(marker);// 创建信息窗口var opts = {width: 200,height: 60,title: item.title};var infoWindow = new BMapGL.InfoWindow('地址:' + item.address, opts);// 点标记添加点击事件marker.addEventListener('click', function() {// 开启信息窗口map.openInfoWindow(infoWindow, markerPoint);});})},},};
</script><style scoped>#container {width: 100%;height: 500px;// 高度一定要给}
</style>

效果如图:

 

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

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

相关文章

msvcr110.dll丢失的解决方法,亲测有效的几种解决方法

最近&#xff0c;我在启动一个程序时&#xff0c;系统突然弹出一个错误提示&#xff0c;告诉我电脑缺失了一个名为msvcr110.dll的文件。这让我感到非常困惑&#xff0c;因为我之前从未遇到过这样的问题。经过一番搜索和尝试&#xff0c;我总结了5种靠谱的解决方法。下面分享给大…

C# 静态类中构造、字段和属性等的执行顺序,含有单例模式分析

C# 静态类时我们实战项目开发中用的非常多的。有些时候可能他的执行顺序并非如我们认为的那样&#xff0c;那就快速来看一下吧&#xff01; 在C#中&#xff0c;静态类的构造函数是在第一次访问该类的任何成员时执行的。静态构造函数是不可继承的&#xff0c;并且在访问静态类的…

百日筑基第三天-SOA初步了解

百日筑基第三天-SOA初步了解 SOA&#xff08;Service-Oriented Architecture&#xff0c;面向服务的架构&#xff09;是一种软件设计原则&#xff0c;它倡导将应用程序分解为独立的服务单元&#xff0c;这些服务通过定义良好的接口相互通信&#xff0c;以实现业务功能。而RPC&…

高效运维:标准化与智能化的运维流程管理实践

高效运维&#xff1a;标准化与智能化的运维流程管理实践 在信息化建设日益深化的今天&#xff0c;运维流程管理已成为企业确保其信息系统稳定、高效运行的关键手段。通过系统化、标准化的运维流程管理&#xff0c;企业能够有效预防系统故障&#xff0c;提升服务质量&#xff0…

7. Revit API UI: ExternalEvent(外部事件)

7. Revit API UI: ExternalEvent&#xff08;外部事件&#xff09; 接着上一篇&#xff0c;上一篇中&#xff0c;我们简单讲了下预览控件&#xff0c;并给了示例。 示例中&#xff0c;通过点击按钮&#xff0c;删除楼板模型&#xff0c;这是怎么做到的呢&#xff1f;这就得用…

React的路由(ReactRouter)-路由导航跳转

1.第一步 // createBrowserRouter路由 RouterProvider组件 import {createBrowserRouter,RouterProvider} from react-router-dom // 创建router实例对象&#xff0c;并配置路由对应关系 const routercreateBrowserRouter([{path:/login,element:<div>我是登录页</di…

vue3-登录小案例(借助ElementPlus+axios)

1.创建一个vue3的项目。 npm create vuelatest 2.引入Elementplus组件库 链接&#xff1a;安装 | Element Plus npm install element-plus --save 在main.js中引入 import ElementPlus from "element-plus";import "element-plus/dist/index.css";ap…

【Android】Android中继承Activity、Application和AppCompatActivity的区别

在 Android 开发中&#xff0c;Activity、Application 和 AppCompatActivity 是三个重要的类&#xff0c;它们各自有不同的作用和用途&#xff1a; 1. Activity Activity 是 Android 应用中的一个核心组件&#xff0c;代表了用户界面上的一个单一屏幕或交互界面。每个 Activi…

python--序列化模块json与pickle

什么叫序列化&#xff1f; 将原本的字典、列表等内容转换成一个字符串的过程就 叫做序列化。 多用的两个序列化模块&#xff1a;json与pickle json&#xff0c;用于字符串 和 python数据类型间进行转换 pickle&#xff0c;用于python特有的类型 和 python的数据类型间进行转换 …

在 Debian 系统上安装 `make` 并且编译安装 Python 3.9

在 Debian 系统上安装 make 工具和 Python 3.9 1. 准备工作 首先&#xff0c;确保你的系统已经更新到最新的软件包列表&#xff1a; sudo apt update2. 安装 make 工具 make 工具可以通过以下命令来安装&#xff1a; sudo apt install make安装完成后&#xff0c;你可以使…

Scania斯堪尼亚SHL题库综合能力性格测试真题题型解析及面试经验

一、走进Scania斯堪尼亚 Scania是一家成立于1891年的瑞典公司&#xff0c;专注于重型卡车和巴士的制造&#xff0c;以其模块化系统和环保设计闻名。作为全球领先的运输解决方案提供商&#xff0c;Scania不仅提供高质量的车辆&#xff0c;还提供相关服务和融资解决方案。公司秉…

Ruby langchainrb gem and custom configuration for the model setup

题意&#xff1a;Ruby 的 langchainrb gem 以及针对模型设置的自定义配置 问题背景&#xff1a; I am working in a prototype using the gem langchainrb. I am using the module assistant module to implemente a basic RAG architecture. 我正在使用 langchainrb 这个 ge…

Beautiful Soup的使用

1、Beautiful Soup简介 Beautiful Soup是一个Python的一个HTML或XML的解析库&#xff0c;我们用它可以方便地从网页中提取数据。 Beautiful Soup 提供一些简单的、Python 式的函数来处理导航、搜索、修改分析树等功能。它是一个工具箱&#xff0c;通过解析文档为用户提供需要抓…

java线程间的通信- notify和 wait

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…

JDBC中的事务及其ACID特性

在JDBC&#xff08;Java Database Connectivity&#xff09;中&#xff0c;事务&#xff08;Transaction&#xff09;是指作为单个逻辑工作单元执行的一系列操作。这些操作要么全部执行&#xff0c;要么全部不执行&#xff0c;从而确保数据库的完整性和一致性。事务是现代数据库…

实战|记一次java协同办公OA系统源码审计

前言 因为笔者也是代码审计初学者&#xff0c;写得不好的地方请见谅。该文章是以项目实战角度出发&#xff0c;希望能给大家带来启发。 审计过程 审计思路 1、拿到一个项目首先要看它使用了什么技术框架&#xff0c;是使用了ssh框架&#xff0c;还是使用了ssm框架&#xff…

面试突击指南:Java基础面试题2

面向对象和集合 1. 面向对象和面向过程的区别 面向过程:面向过程的编程方式是分析解决问题的步骤,然后用函数把这些步骤一步一步地实现,并在使用的时候逐个调用。这种方式性能较高,因此在单片机和嵌入式开发中经常采用面向过程开发。 面向对象:面向对象的编程方式是把问…

C#基于SkiaSharp实现印章管理(2)

上一篇文章最后提到基于System.Text.Json能够序列化SKColor对象&#xff0c;但是反序列化时却无法解析本地json数据。换成Newtonsoft.Json进行序列化和反序列化也是类似的问题。   通过百度及查看微软的帮助文档&#xff0c;上述情况下需自定义转换类以处理SKColor类型数据的…

搜维尔科技:【研究】触觉手套比控制器更能带来身临其境、更安全、更高效的虚拟体验

自然交互可提高VR模拟的有效性。研究表明&#xff0c;触觉手套比控制器更能带来身临其境、更安全、更高效的虚拟体验。 以下是验证 医疗培训中的触觉技术 “ 95.5%的参与者表示触摸是 XR 教育的重要组成部分&#xff0c;90.9% 的参与者表示 XR 触觉将提供一个安全的学习场所。…

Python错误集锦:faker模块生成xml文件时提示:`xml` requires the `xmltodict` Python library

原文链接&#xff1a;http://www.juzicode.com/python-error-faker-exceptions-unsupportedfeature-xml-requires-the-xmltodict-python-library 错误提示&#xff1a; faker模块生成xml文件时提示&#xff1a; xml requires the xmltodict Python library Traceback (most r…