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

在vue中使用bing map 的小demo

1.注意事项(关于经纬度)

如果不转换成WGS84 标准的经纬度 bing map会报错

如果要在 Bing Maps 中使用中国地区的经纬度,需要先将其转换为 WGS84 标准的经纬度。你可以使用第三方的坐标转换服务,或者使用相关的 JavaScript 库进行坐标转换。常见的库包括 coordtransform、proj4 等。通过将中国的经纬度转换为 WGS84 标准的经纬度,就可以正确地初始化 Bing Maps 了。

转换成WGS84的链接

2.相关的文档链接

中文的demo网站
bing map微软官方的文档

3.bing map的cdn

下面两种都可以 第一个是在js中加key 第二种是直接在cdn中加key

  • <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap'></script>```
    
  • <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=YourBingMapsKey&callback=loadMapScenario&mkt=zh-cn&setlang=zh-cn' async defer></script>

4.demo的代码

<template><div id="myMap" style="width: 100%; height: 100%"></div>
</template><script>
export default {data() {return {}},mounted() {this.loadMapScenario()},methods: {loadMapScenario() {var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Av8AcViWMuCyl4gWAyLZBLG72faZ5lawWnPKnJ9R6T87m-Rx51ZB1h2zrSxDZW0_',center: new Microsoft.Maps.Location(39.91738986102482, 116.39232296123949),mapTypeId: Microsoft.Maps.MapTypeId.aerial, // 设置地图类型为卫星zoom: 10,showMapTypeSelector: false, // 将选项框隐藏showDashboard: false // 将点击按钮隐藏})// 创建点标记var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), {icon: 'https://www.bingmapsportal.com/Content/images/poi_custom.png',anchor: new Microsoft.Maps.Point(12, 39)})// 创建信息窗口const infobox = new Microsoft.Maps.Infobox(map.getCenter(), {visible: false, // 初始时隐藏description: '这是信息窗口的内容' // 信息窗口的内容})// 将信息窗口添加到地图上map.entities.push(infobox)// 将点标记添加到地图上map.entities.push(pushpin)// 鼠标悬停在点标记上时显示信息窗口Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function (e) {infobox.setLocation(e.target.getLocation())infobox.setOptions({visible: true // 显示信息窗口})})// 鼠标移出点标记时隐藏信息窗口Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', function () {infobox.setOptions({visible: false // 隐藏信息窗口})})}}
}
</script><style scoped></style>

相关文章:

在vue中使用bing map 的小demo

1.注意事项&#xff08;关于经纬度&#xff09; 如果不转换成WGS84 标准的经纬度 bing map会报错 如果要在 Bing Maps 中使用中国地区的经纬度&#xff0c;需要先将其转换为 WGS84 标准的经纬度。你可以使用第三方的坐标转换服务&#xff0c;或者使用相关的 JavaScript 库进行…...

基于uni-app的埋点sdk设计

一、统计app激活状态 在App.vue 中 利用onShow生命周期验证 或者操作 onShow: function () { uni.showToast({ title: onShow }) }, 二、页面级别的统计 &#xff08;进入页面、停留时长、手机系统信息、网络状态、页面路径、标题&#xff09; 需要收集的数据 { &quo…...

Python学习笔记(三)

一、使用朴素贝叶斯制作鸢尾花数据模型 from sklearn.preprocessing import StandardScaler from sklearn.naive_bayes import MultinomialNB from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split from sklearn.feature_extraction…...

Python办公自动化之Excel做表自动化:全网最全,看这一篇就够了!

0 Python Excel库对比 我们先来看一下python中能操作Excel的库对比&#xff08;一共九个库&#xff09;&#xff1a; 1 Python xlrd 读取 操作Excel 1.1 xlrd模块介绍 &#xff08;1&#xff09;什么是xlrd模块&#xff1f; python操作excel主要用到xlrd和xlwt这两个库&…...

【学习笔记】R语言入门与数据分析1

数据分析 数据分析的过程&#xff1a; 数据采集 数据存储 数据分析 数据挖掘 数据可视化 进行决策 数据挖掘 数据量大 复杂度高&#xff0c;容忍一定的误差限 追求相关性而非因果性 数据可视化 直观明了 R语言介绍 R是免费的&#xff08;开源软件、扩展性好&#xff09;…...

MyBatis-Spring整合

引入Spring之前需要了解mybatis-spring包中的一些重要类&#xff1b; http://www.mybatis.org/spring/zh/index.html 什么是 MyBatis-Spring&#xff1f; MyBatis-Spring 会帮助你将 MyBatis 代码无缝地整合到 Spring 中。 知识基础 在开始使用 MyBatis-Spring 之前&#x…...

资深亚马逊运营实战技巧:跨境电商6大选品法

1、工具选品法 比如店雷达&#xff0c; 通过大数据分析工具选出来利基产品或者通过工具选出来利基的市场&#xff0c;然后再通过分析市场来得到产品。 以女装为例&#xff0c;通过大数据分析&#xff0c;全方位对市场需求、款式、质量等进行多维度判断&#xff0c;其中SKU销量…...

bugku-web-需要管理员

页面源码 <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetUTF-8"> <title>404 Not Found</title> </head> <body> <div idmain><i> <h2>Something error:</h2…...

STM32之FreeRTOS移植

1.FreeRTOS的移植过程是将系统需要的文件和代码进行移植和裁剪&#xff0c;其移植的主要过程为&#xff1a; &#xff08;1&#xff09;官网上下载FreeRTOS源码&#xff1a;https://www.freertos.org/ &#xff08;2&#xff09;移植文件夹&#xff0c;在portable文件夹中只需…...

SpringBoot实用开发(十四)-- 消息(Message)的简单认识

目录 1.消息的概念 2.Java处理消息的标准规范 3.JMS 4.AMQP 5.MQTT 1.消息的概念 广义角度来说,消息其实就是信息,但是和信息又有所不同。信息通常被定义为一组数据,而消息除了具有数据的特征之外,还有...

【Spring Boot 源码学习】SpringApplication 的 run 方法核心流程介绍

《Spring Boot 源码学习系列》 SpringApplication 的 run 方法核心流程介绍 一、引言二、往期内容三、主要内容3.1 run 方法源码初识3.2 引导上下文 BootstrapContext3.3 系统属性【java.awt.headless】3.4 早期启动阶段3.5 准备和配置应用环境3.6 打印 Banner 信息3.7 新建应用…...

如何保证消息不丢失?——使用rabbitmq的死信队列!

如何保证消息不丢失?——使用rabbitmq的死信队列&#xff01; 1、什么是死信 在 RabbitMQ 中充当主角的就是消息&#xff0c;在不同场景下&#xff0c;消息会有不同地表现。 死信就是消息在特定场景下的一种表现形式&#xff0c;这些场景包括&#xff1a; 消息被拒绝访问&am…...

html、css、京东移动端静态页面,资源免费分享,可作为参考,提供InsCode在线运行演示

CSDN将我上传的免费资源私自变成VIP专享资源&#xff0c;且作为作者的我不可修改为免费资源&#xff0c;不可删除&#xff0c;寻找客服无果&#xff0c;很愤怒&#xff0c;&#xff08;我发布免费资源就是希望大家能免费一起用、一起学习&#xff09;&#xff0c;接下来继续寻找…...

头歌-机器学习 第13次实验 特征工程——共享单车之租赁需求预估

第1关&#xff1a;数据探索与可视化 任务描述 本关任务&#xff1a;编写python代码&#xff0c;完成一天中不同时间段的平均租赁数量的可视化功能。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 读取数据数据探索与可视化 读取数据 数据保存在./step1/…...

Unity 2D让相机跟随角色移动

相机跟随移动 最简单的方式通过插件Cinemachine 在窗口/包管理器选择全部找到Cinemachine&#xff0c;导入。然后在游戏对象/Cinemachine创建2D Camera。此时层级中创建一个2D相机。选中人物拖入检查器Follow。此时相机跟随人物移动。 修改相机视口距离 在检查器中Lens下调正…...

【面试题】s += 1 和 s = s + 1的区别

文章目录 1.问题2.发现过程3.解析 1.问题 以下两个程序真的完全等同吗&#xff1f; short s 0; s 1; short s 0; s s 1; 2.发现过程 初看s 1 和 s s 1好像是等价的&#xff0c;没有什么区别。很长一段时间内我也是这么觉得&#xff0c;因为当时学习c语言的时候教科书…...

ARM的学习

点亮流水灯 .text .global _start _start: 使能GPIOE的外设时钟 RCC_MP_AHB4ENSETR 0x50000a28 [4]->1LDR R0,0X50000A28 指定基地址LDR R1,[R0] 将寄存器数据读取出来保存到R1中ORR R1,R1,#(0x3<<4) [4]设置为1ORR R1,R1,#(0x3<<5) [5]设置为1STR …...

Restful API接口规范(以Django为例)

Restful API接口规范(以Django为例) Restful API的接口架构风格中制定了一些规范&#xff0c;极大的简化了前后端对接的时间&#xff0c;以及增加了开发效率 安全性保证–使用https路径中带 api标识路径中带版本号数据即资源&#xff0c;通常使用名词操作请求方式决定操作资源…...

AI助力,程序员压力倍增?

讲动人的故事,写懂人的代码 你知道程序员现在在AI辅助编程时最头疼的事情是什么吗?就是怎么在改代码的时候保住小命。 大家都听过程序员因为工作太累导致过劳湿的事情。 无论是写新功能、修bug,还是更改系统配置,都得改代码。 现在有了AI的帮助,本应该轻松很多,为什么…...

LoRA微调

论文&#xff1a;LoRA: Low-Rank Adaptation of Large Language Models 实现&#xff1a;microsoft/LoRA: Code for loralib, an implementation of “LoRA: Low-Rank Adaptation of Large Language Models” (github.com) 摘要 自然语言处理的一个重要的开发范式包括&#…...

45.基于SpringBoot + Vue实现的前后端分离-驾校预约学习系统(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;采用SpringBoot Vue框架&#xff0c;MYSQL数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SpringBoot Vue技术的驾校预约学习系统设计与实现管理工作…...

系统思考—时间滞延

“没有足够的时间是所有管理问题的一部分。”——彼得德鲁克 鱼和熊掌可以兼得&#xff0c;但并不能同时获得。在提出系统解决方案时&#xff0c;我们必须认识到并考虑到解决方案的实施通常会有必要的时间滞延。这种延迟有时比我们预想的要长得多&#xff0c;特别是当方案涉及…...

SSM项目转Springboot项目

SSM项目转Springboot项目 由于几年前写的一个ssm项目想转成springboot项目&#xff0c;所以今天倒腾了一下。 最近有人需要毕业设计转换一下&#xff0c;所以我有时间的话可以有偿帮忙转换&#xff0c;需要的私信我或&#xff0b;v&#xff1a;Arousala_ 首先创建一个新的spr…...

VUE3.0对比VUE2.0

vue3.0 与 vue2.0的不同之处有以下几点&#xff1a; 数据响应式原理 3.0基于Proxy的代理实现监测&#xff0c;vue2.0是基于Object.defineProperty实现监测。 vue2.0 通过Object.defineProperty&#xff0c;每个数据属性被定义成可观察的&#xff0c;具有getter和setter方法&…...

车内AR互动娱乐解决方案,打造沉浸式智能座舱体验

美摄科技凭借其卓越的创新能力&#xff0c;为企业带来了革命性的车内AR互动娱乐解决方案。该方案凭借自研的AI检测和渲染引擎&#xff0c;打造出逼真的数字形象&#xff0c;不仅丰富了车机娱乐内容&#xff0c;更提升了乘客与车辆的互动体验&#xff0c;让每一次出行都成为一场…...

OR36 链表的回文结构

描述 对于一个链表&#xff0c;请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法&#xff0c;判断其是否为回文结构。 给定一个链表的头指针A&#xff0c;请返回一个bool值&#xff0c;代表其是否为回文结构。保证链表长度小于等于900。 测试样例&#xff1a; 1->…...

【译】微调与人工引导: 语言模型调整中的 SFT 和 RLHF

原文地址&#xff1a;Fine-Tuning vs. Human Guidance: SFT and RLHF in Language Model Tuning 本文主要对监督微调&#xff08;SFT, Supervised Fine Tuning &#xff09;和人类反馈强化学习&#xff08;RLHF, Reinforcement Learning from Human Feedback&#xff09;进行简…...

kylin java.io.IOException: error=13, Permission denied

linux centos7.8 error13, Permission denied_linux open error13-CSDN博客 chmod -R 777 /home/zengwenfeng/kkFileView-4.2.1 2024-04-15 13:15:17.416 WARN 3400 --- [er-offprocmng-1] o.j.l.office.LocalOfficeProcessManager : An I/O error prevents us to determine…...

前端面试01总结

1.Js 中!x为true 时,x可能为哪些值 答: 1.false&#xff1a;布尔值false 2.0或-0&#xff1a;数字零 3.""或’或 &#xff08;空字符串&#xff09;&#xff1a;长度为0的字符串 4.null&#xff1a;表示没有任何值的特殊值 5.undefined&#xff1a;变量未定义时的默认…...

算法--目录

algorithm: 十种排序算法 二分法-各种应用 algorithm: 拓扑排序 算法中的背包问题 最长子序列问题 前缀和-解题集合 差分数组-解题...

宣讲家网站李慎明两学一做/百度一下你就知道原版

[Icons] Name: "{commondesktop}\{#MyAppName}"; Filename: "{app}\{#MyAppExeName}";IconFilename:{app}\{#MyAppExeName}; Tasks: desktopicon; Check: canAddIcon...

自己建还是找代理建网站/建网站需要多少钱和什么条件

什么是一个高度平衡的二叉搜索树? 树结构中的常见用语: 节点的深度 - 从树的根节点到该节点的边数 节点的高度 - 该节点和叶子之间最长路径上的边数 树的高度 - 其根节点的高度 一个高度平衡的二叉搜索树&#xff08;平衡二叉搜索树&#xff09;是在插入和删除任何节点之…...

商务网站规划设计要点/品牌策划方案模板

转载自http://cnlearn.linksprite.com/?p5248#.VwZrzvl95hE 数字 I/O &#xff08;1&#xff09;pinMode(pin, mode) 数字IO 口输入输出模式定义函数&#xff0c;pin 表示为0&#xff5e;13&#xff0c; mode 表示为INPUT 或OUTPUT 。&#xff08;2&#xff09; digitalWrite(…...

绍兴建设开发有限公司网站首页/长沙网

GUI&#xff08;图形化界面编程&#xff09;   Graphical User Interface   (java.Awt javax.Swing) CLI(命令行操作接口)   Command line User Interface现在讲解GUI&#xff1a; java.Awt&#xff1a; Abstract Windows ToolKit:主要是调用本地系统方法实现&a…...

站长工具seo诊断/免费推广的app有哪些

2019独角兽企业重金招聘Python工程师标准>>> java中final关键字通常指“这是无法改变的”。 可能使用final的三种情况&#xff1a;数据、方法、类。 1. final 数据 对于基本类型&#xff0c;final使数值恒定不变&#xff1b; 对于引用类型&#xff0c;final使引用…...

电商视觉设计网站/中国十大网站排名

摘要&#xff1a;化是个人通信通信指“变为到家”的到()的服务方式服务方式。协议内容影响不会表的路由&#xff0c;下协在以议中。平面基础应高于井场面&#xff0c;排水并应畅通。...化是个人通信通信指“变为到家”的到()的服务方式服务方式。主要劈理简述与节区别理的。协议…...