在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>

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

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

相关文章

从数据中台到上层应用全景架构示例

一、前言 对于大型企业而言&#xff0c;数据已经成为基本的生产资料&#xff0c;但是有很多公司还是值关心上层应用&#xff0c;而忽略了数据的治理&#xff0c;从而并不能很好的发挥公司的数据资产效益。比如博主自己是做后端的&#xff0c;主要是做应用层&#xff0c;也就是…

计算机网络 Cisco路由信息协议(RIP)实验

一、实验内容 1、命名 2、关闭域名解释 3、设置路由器接口IP地址 4、根据要求配置RIP以实现所有客户机都能相互通信 5、配置默认路由 二、实验数据处理 1、建立拓扑图 2、PC机地址配置 主机IP地址子网掩码网关PC110.23.1.2255.255.255.010.23.1.1PC210.23.1.3255.255.2…

将普通用户加入Docker组,使用docker

创建名为 “docker” 的组 要创建名为 “docker” 的组&#xff0c;您可以使用以下命令&#xff1a; sudo groupadd docker这将创建一个名为 “docker” 的组。您可以使用此组来管理 Docker 容器的访问权限。 查看 Docker 组中的用户 要查看 Docker 组中的用户&#xff0c;…

OR36 链表的回文结构

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

ChatGPT革新论文写作:让文章无往不利

ChatGPT无限次数:点击直达 ChatGPT革新论文写作&#xff1a;让文章无往不利 在当今信息爆炸的时代&#xff0c;写作是一项至关重要的技能&#xff0c;它不仅仅是传递信息的工具&#xff0c;更是展示思想、沟通观点的重要方式。而随着人工智能技术的不断发展&#xff0c;ChatGP…

代码随想录算法练习Day13:有效的字母异位词

题目&#xff1a; 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 题目链接&#xff1a;242.有效的字母异位词 卡哥的视频讲解&#xff…

SCM供应链一体化平台:增强企业竞争力的必备利器

SCM供应链一体化平台是一种集成的软件系统&#xff0c;用于管理和优化企业的供应链活动。它将供应链中的各个环节&#xff0c;如采购、生产、物流、销售等&#xff0c;整合在一个统一的平台上&#xff0c;实现信息共享、协同工作和流程优化。 SCM供应链一体化平台的主要功能包括…

Linux/Iclean

Iclean Enumeration nmap 先使用默认规则扫描常用的端口&#xff0c;发现对外开放了 22 和 80 端口&#xff0c;然后扫描这两个端口的详细信息&#xff0c;结果如下&#xff0c;很常规的结果&#xff0c;没发现什么有趣的东西 ┌──(kali㉿kali)-[~/vegetable/HTB/Iclean] …

Appium 并发测试之 python 启动 appium 服务

python 启动appium服务&#xff0c;需要使用subprocess模块&#xff0c;该模块可以创建新的进程&#xff0c;并且连接到进程的输入&#xff0c;输出&#xff0c;错误等管道信息&#xff0c;并且可以获取进程的返回值 测试场景 使用python启动2台appium服务&#xff0c;端口配置…

面试经典150题——轮转数组

面试经典150题 day6 题目来源我的题解方法一 使用额外数组方法二 循环替换方法三 数组翻转 题目来源 力扣每日一题&#xff1b;题序&#xff1a;189 我的题解 方法一 使用额外数组 使用一个额外数组暂存最终答案&#xff0c;最后再赋值给nums 时间复杂度&#xff1a;O(n) 空…

永久关闭 Windows 11 系统更新

永久关闭 Windows 11 系统更新 请注意&#xff0c;关闭系统更新可能会使您的系统面临安全风险。确保您了解可能的后果&#xff0c;并在必要时考虑重新启用更新。 使用组策略编辑器&#xff08;仅限 Windows 11 Pro 和 Enterprise 版&#xff09; 步骤 1&#xff1a;打开本地…

Unsupervised Learning ~ Anomaly detection

unusual events vibration: 振动 Density estimation: Gaussian(normal) Distribution. standard deviation: 标准差 variance deviation sigma Mu Parameter estimation Anomaly detection algorithm 少量异常样本点的处理经验 algorithm evaluation skewed datatsets:…

【第十五届】蓝桥杯省赛C++b组

今年的蓝桥杯省赛已经结束了&#xff0c;与以往不同&#xff0c;今年又回到了8道题&#xff0c;而22&#xff0c;23年出现了10道题 大家觉得难度怎么样&#xff0c;欢迎进来讨论&#xff0c;博主今年没参加哈&#xff0c;大家聊聊&#xff0c;我听听大家的意见和看法哈 试题A:…

HTML制作跳动的心形网页

作为一名码农 也有自己浪漫的小心思嗷~ 该网页 代码整体难度不大 操作性较强 祝大家都幸福hhhhh 效果成品&#xff1a; 全部代码&#xff1a; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE> 一个…

静电对集成电路封装的危害及防范措施

在现代工业生产中&#xff0c;静电已经成为一个不可忽视的问题。特别是在集成电路&#xff08;IC&#xff09;封装领域&#xff0c;静电可能对产品质量和生产效率造成严重的影响。本文将探讨静电对IC封装的危害&#xff0c;并介绍一些防范措施以减少静电带来的风险。 静电对IC封…

Python数据挖掘项目开发实战:使用转换器抽取特征

注意&#xff1a;本文下载的资源&#xff0c;与以下文章的思路有相同点&#xff0c;也有不同点&#xff0c;最终目标只是让读者从多维度去熟练掌握本知识点。 Python数据挖掘项目开发实战&#xff1a;使用转换器抽取特征 一、项目背景与目标 在数据挖掘项目中&#xff0c;特征…

ubuntu下的串口调试工具cutecom

系统&#xff1a;ubuntu20.04 &#xff08;1&#xff09;接线 使用 rs485&#xff1c;-----> rs232 转接口&#xff08; 设备直接出来的是rs485&#xff09;&#xff0c;电脑主机接入一根 rs232&#xff1c;-----> USB口 连接线&#xff0c;ubuntu系统下打开 termin…

Gateway基础配置详解

Gateway基础配置详解 随着微服务的流行&#xff0c;API网关作为微服务架构中的关键组件&#xff0c;扮演着越来越重要的角色。在众多的API网关解决方案中&#xff0c;Spring Cloud Gateway以其强大的功能和灵活的配置受到了广泛的关注。本文将详细介绍Spring Cloud Gateway的基…

Redis 集群模式整理

Redis Sentinel 体量较小时&#xff0c;选择 Redis Sentinel &#xff0c;单主 Redis 足以支撑业务。Redis Cluster Redis 官方提供的集群化方案&#xff0c;体量较大时&#xff0c;选择 Redis Cluster &#xff0c;通过分片&#xff0c;使用更多内存。Twemprox Twemprox 是 Tw…

【深入理解Java IO流0x09】解读Java NIO核心知识(下篇)

1. NIO简介 在开始前&#xff0c;让我们再简单回顾一下NIO。 在传统的 Java I/O 模型&#xff08;BIO&#xff09;中&#xff0c;I/O 操作是以阻塞的方式进行的。也就是说&#xff0c;当一个线程执行一个 I/O 操作时&#xff0c;它会被阻塞直到操作完成。这种阻塞模型在处理多…