bing Map 在vue项目中的使用

bingMap的使用小结 这两天研究了一下必应地图,并且按照官方文档编写封装成地图工具类,此过程中也遇到一些问题,在这里记录一下。 1.为什么要用bing地图 其实在国外有google,在国内有百度,怎么着应该都轮不到研究bing地图,但是现在的问题是,我需要在国内使用世界地图,如果要用google地图,就必须翻墙使用,这就造成了访问瓶颈,而百度地图又不提供世界地图。所以bing就变成了最好的选择。 2. 阅读详情

写在最前面

拥有全球数据库国内好像就只有百度地图有,高德、搜狗、腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap。

bing Map 使用教程(基础)

参考文档: bing Map 官方教程

bing Map 初始化

  • 引入bing map资源
<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]' async defer></script>
  • 初始化地图
<div id="myMap"></div>

<script type='text/javascript'>
  function GetMap()
  {
    var map = new Microsoft.Maps.Map('#myMap');
    //Add your post map load code here.
  }
</script>
  • 设置地图控制参数

    • 常用控制参数
      • branch
        • 加载地图sdk的哪个分支:release(默认)、experimental
      • callback
        • 地图控制脚本加载完成后的回调(默认:GetMap)
      • key
        • 用户使用的userKey(详情)
      • setLang
        • 指定用于地图标签和导航控件的语言
        • 常用:中国大陆(zh-CN)、中国香港(zh-HK)、简体中文(zh-Hans)、中国台湾(zh-TW)、英文-英国(en-GB)、英文-美国(en-US)
      • setMkt(详情)
      • UR(详情)
  • 给bing map添加地图事件(参考)

  //  核心代码-demo
  Microsoft.Maps.Events.addHandler(你的地图名称, 触发地图事件名称, function() { 触发的事件 });

  // 常用实例
  //Add view change events to the map.
  // 视图更改事件
  Microsoft.Maps.Events.addHandler(map, 'viewchangestart', function () { highlight('mapViewChangeStart'); });
  Microsoft.Maps.Events.addHandler(map, 'viewchange', function () { highlight('mapViewChange'); });
  Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function () { highlight('mapViewChangEnd'); });

  //Add mouse events to the map.
  // 鼠标事件
  Microsoft.Maps.Events.addHandler(map, 'click', function () { highlight('mapClick'); });
  Microsoft.Maps.Events.addHandler(map, 'dblclick', function () { highlight('mapDblClick'); });
  Microsoft.Maps.Events.addHandler(map, 'rightclick', function () { highlight(
Vue+OpenLayers7入门到实战:OpenLayers加载必应地图(BingMap) 本章介绍如何使用OpenLayers7在地图上如何加载必应地图(BingMap)。需要提前到必应开发者中心申请对应的地图访问api key才可以加载地图。 阅读详情

相关推荐

9.在 Vue 3 中使用 OpenLayers 加载 Bing 地图示例(多种形式)

随着地理信息技术的不断发展,地图应用在现代项目中的需求也日益增长。Bing 地图提供了高质量的地图服务,包括矢量、卫星和混合标记等多种类型。OpenLayers 是一款强大的开源地图框架,能让我们在项目中轻松实现地图加载与交互。本文将介绍如何在Vue 3项目中使用OpenLayers加载 Bing 地图,并通过 Vue 3 的实现灵活的地图类型切换。通过本文,我们了解了如何在 Vue 3 中结合 OpenLayers 加载 Bing 地图,并实现了地图类型的动态切换。

小彭的博客 1215

011:vue+openlayers加载引用bing地图(多种形式)

本示例的目的是介绍演示如何在vue+openlayers中添加bing地图,并含多种的表现形式。

大剑师兰特的GIS世界 1215

Openlayers实战:加载Bing地图

Bing地图在地图领域有一定的江湖地位,是微软公司的产品。在Openlayers其内置了Bing地图的方法,可以研究其API。我们的实战中是要其成为一个底图,很简单的就可以加载出来。

大剑师兰特的GIS世界 492

bing Map 在vue项目中的使用详解

主要介绍了bing Map 在vue项目中的使用,需要的朋友可以参考下

Vue Baidu Map

Vue Baidu Map的demo 在vue里面直接使用百度地图的一个demo,供大家学习参考,有不足的地方留言一块讨论

RS485 MODBUS转PROFINET网关案例丨汇川变频器接入到1200 PROFINET

本案例介绍的是用北京小疆智控(北京)技术有限公司生产的GW-PN5003型MODBUS RTU转PROFINET网关将汇川变频器接入西门子PLC1200 PROFINET网络的使用方法。

bjxjzk的博客 1880

Tesseract-Ocr踩坑下载以及进行检验

1 OCR,即Optical Character Recognition:光学字符识别,是指通过扫描字符,然后通过其形状将其翻译成电子文本的过程。下载完成后进行解压找到这两个,然后复制到之前下载Tesseract-Ocr的tessdata文件下。可能会出现报错说chi下载的问题咱们不用管继续ok让它先下载完毕,后续会有下载chi的步骤。四、检验tesseract使用(将以下图片进行下载我这里将以下图片命名为3.png)我这里选的是2024年的版本如果下载不了;4 在安装的时候(找到下载的exe文件,双击)

m0_51428325的博客 1916

顶刊《会计研究》数据复现|最新上市公司数智化数据

本文基于Python文本分析方法构建了中国A股上市公司数智化指标(1991-2024),通过识别年报中的"机器学习""智能医疗"等关键词,量化企业数字化与智能化融合程度。研究发现数智化企业更倾向于非正式渠道的定性披露以规避风险,该指标为监管完善信披规则提供了参考。研究还揭示了数智化对企业信息披露策略的转变,并提出了未来研究方向,包括数智化对绿色创新、ESG表现等影响机制。数据覆盖非金融类上市公司,采用文本挖掘技术构建结构化指标,为相关领域研究提供了微观基础。

PPdata_Academy的博客 1487

常用的数据结构以及常用的算法

常用的数据结构以及常用的算法 常用数据结构 数据结构是计算机存储、组织数据的方式。 数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。 通常情况下,精心选择的数据结构可以带来更高的运行或者存储效率。 数据结构往往同高效的检索算法和索引技术有关。 一、线性表 线性结构: 最常用、最简单的一种数据结构。 线性表: 典型的线性结构。基本特点是线性表中的 数据元素有序且有限。结构中: ① 存在一个唯一的被称为“第一个”的数据元素; ② 存在一个唯一的被称为“最后一个”的数据元素; ③ 除第一个元素外,每

qq_47605698的博客 1451

从DDH到FastANI:原核生物分类黄金标准的进化史与技术对比

本文系统梳理了原核生物分类标准从DDH到FastANI的四次技术革命,详细解析了95%相似度阈值的科学依据及应用场景。通过对比DDH、16S rRNA、ANI和FastANI的技术特点与性能指标,为微生物研究者提供基因组分类的实战指南,并展望第三代测序时代的分类新挑战。

weixin_29275257的博客 414

ACT代码梳理:新手学具身智能,不需要学会一堆理论,先跑起来再说

我是一个刚接触具身智能的小白。第一次看 ACT 项目,什么 Transformer、VAE、Mujoco、rollout,全是天书。但我没打算先把理论补完。太难,也太慢。我的策略是:直接上手,边做边学,卡在哪就学到哪。这篇文章是我的第一站——带你一起看懂 ACT 项目的整体架构,了解它的核心模块和流程。开始前,我列了 本文出现的18 个关键词,是我一开始完全搞不懂的。你可以先扫一眼,如果不认识的超过 10 个,那我们就是同路人,可以放心往下看了。

qq_17405041的博客 1209

ArcGIS新手必看:HWSD2土壤数据从下载到批量提取TIFF的完整流程

本文详细介绍了ArcGIS中HWSD2土壤数据的完整处理流程,从数据下载、预处理到批量提取TIFF文件。涵盖栅格属性表构建、属性数据连接及性能优化等关键步骤,帮助新手高效掌握HWSD2数据提取技术,提升地理信息数据处理效率。

ll5678的博客 1036

【N32L40X】学习笔记12-规则组+注入组+外部触发启动

使用定时器触发规则通道开始采集数据,采集完成后使用dma传输数据,并启动注入通道转换数据,注入通道转换完成后产生中断,中断中读物注入通道数据。

Car12 423

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

上一篇: 基于cropper.js封装vue在线图片裁剪组件
下一篇: learning mongodb day 1
2B_LIS
博客等级 码龄14年 6粉丝 11原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值