这次给大家带来
vue
项目内使用全球数据库，的注意事项有哪些，下面就是实战案例，一起来看一下。
写在最前面
拥有全球数据库国内好像就只有百度地图有，高德、搜狗、腾讯的都不行，但是由于百度地图的数据更新不及时，所以在做相关项目要用到国外数据的时候，最好还是推荐使用
bing
Map。
bing Map 使用教程（基础）
参考文档：bing Map 官方教程
bing Map 初始化
引入bing map资源
初始化地图
设置地图控制参数
常用控制参数
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添加地图事件（参考）
bing Map 添加图钉（详情）
基本图钉示例
demo_1
demo_2
添加自定义图片图钉（详情）
自定义图标的图钉
bing Map 给图钉添加事件
核心代码
bing Map 给图钉添加hover样式
其核心还是给bing Map的图钉添加事件，通过事件修改图钉的样式
给图钉添加hover样式
bing Map 固定锚点
开发人员在使用自定义图钉时遇到的最常见问题之一是，当他们缩放地图时，看起来好像他们的图钉正在漂移到或离开它所要锚定的位置。这是由于图钉选项中的锚点值不正确。锚点指定图像的哪个像素坐标相对于图像的左上角应与图钉位置坐标重叠。
常见配置参考
bing Map 在vue中使用
vue引入bing Map可能会遇到的问题
由于vue一般引用第三方插件是用import的方式进行的，所以的在html中使用script标签引入bing Map SDK会出现两种问题
1.在控制台会报错：Mirosorft is not defined
2.vue-cli会报错：Mirosorft is not defined
这里的原因是由于异步加载，所以在调用"Mirosorft"的时候可能SDK并没有引用成功
解决“Mirosorft is not defined”的错误
文档参考
解决“Mirosorft is not defined”的错误，只要在项目中保证调用地图之前，能够正确引入相关工具类就行了。
集成bing Map组件到vue中
需要达到的功能
在vue项目中成功加载bing Map （完成）
当点击bing Map的时候，返回点击点的经纬度 （完成）
子组件触发事件返回参数到父组件
当已有经纬度的时候，加载bingMap自动显示其经纬度所在的位置并设置图钉 （待完成）
子组件触发事件返回参数到父组件
实现原理
核心代码
封装bing Map通用组件
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
vue组件做出无限级多选菜单
New Bing
微软new必应，集成GPT4模型的新一代搜索引擎，New Bing不仅提供了快速、准确、全面的搜索结果，还可以与用户进行自然、有趣、有用的对话，为用户提供更多的信息和服务。
下载
使用webpack做出ReactApp
// 核心代码-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('mapRightClick'); });
Microsoft.Maps.Events.addHandler(map, 'mousedown', function () { highlight('mapMousedown'); });
Microsoft.Maps.Events.addHandler(map, 'mouseout', function () { highlight('mapMouseout'); });
Microsoft.Maps.Events.addHandler(map, 'mouseover', function () { highlight('mapMouseover'); });
Microsoft.Maps.Events.addHandler(map, 'mouseup', function () { highlight('mapMouseup'); });
Microsoft.Maps.Events.addHandler(map, 'mousewheel', function () { highlight('mapMousewheel'); });
//Add addition map event handlers
Microsoft.Maps.Events.addHandler(map, 'maptypechanged', function () { highlight('maptypechanged'); });function GetMap() {
var map = new Microsoft.Maps.Map('#myMap', {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.6149, -122.1941)
});
var center = map.getCenter();
//Create custom Pushpin
// 创建一个图钉
var pin = new Microsoft.Maps.Pushpin(center, {
// demo_1
title: 'Microsoft', // 图钉的标题
subTitle: 'City Center', // 图钉主体文字
text: '1' // 图钉内的文字
// demo_2
color: 'red', // 纯色图钉
});
//Add the pushpin to the map
map.entities.push(pin);
}function GetMap() {
var map = new Microsoft.Maps.Map('#myMap',
{
credentials: 'You Bing Maps Key'
});
var center = map.getCenter();
//Create custom Pushpin
var pin = new Microsoft.Maps.Pushpin(center, {
icon: 'images/poi_custom.png', // 自定义图片路径
anchor: new Microsoft.Maps.Point(12, 39)
});
//Add the pushpin to the map
map.entities.push(pin);
}//Create a pushpin.
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter());
map.entities.push(pushpin);
//Add mouse events to the pushpin.
// 将自定义方法及鼠标事件添加到图钉上面
Microsoft.Maps.Events.addHandler(pushpin, 'click', function () { highlight('pushpinClick'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mousedown', function () { highlight('pushpinMousedown'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', function () { highlight('pushpinMouseout'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', function () { highlight('pushpinMouseover'); });
Microsoft.Maps.Events.addHandler(pushpin, 'mouseup', function () { highlight('pushpinMouseup'); });// demo
var defaultColor = 'blue';
var hoverColor = 'red';
var mouseDownColor = 'purple';
var pin = new Microsoft.Maps.Pushpin(map.getCenter(), {
color: defaultColor
});
map.entities.push(pin);
Microsoft.Maps.Events.addHandler(pin, 'mouseover', function (e) {
e.target.setOptions({ color: hoverColor });
});
Microsoft.Maps.Events.addHandler(pin, 'mousedown', function (e) {
e.target.setOptions({ color: mouseDownColor });
});
Microsoft.Maps.Events.addHandler(pin, 'mouseout', function (e) {
e.target.setOptions({ color: defaultColor });
});// bing map init devTools
export default {
init: function (){
console.log("初始化bing地图脚本...");
// bing map key
const bingUesrKey = '你的bingMap Key';
const BingMap_URL = 'http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=' + bingUesrKey;
return new Promise((resolve, reject) => {
if(typeof Microsoft !== "undefined") {
resolve(Microsoft);
return true;
}
// 插入script脚本
let scriptNode = document.createElement("script");
scriptNode.setAttribute("type", "text/javascript");
scriptNode.setAttribute("src", BingMap_URL);
document.body.appendChild(scriptNode);
// 等待页面加载完毕回调
let timeout = 0;
let interval = setInterval(() => {
// 超时10秒加载失败
if(timeout >= 20) {
reject();
clearInterval(interval);
console.error("bing地图脚本初始化失败...");
}
// 加载成功
if(typeof Microsoft !== "undefined") {
resolve(Microsoft);
clearInterval(interval);
console.log("bing地图脚本初始化成功...");
}
timeout += 1;
}, 500);
});
}
}
// bing map vue
import bingMap from './**/bing-map';
bingMap.init()
.then((Microsoft) => {
console.log(Microsoft)
console.log("加载成功...")
// 开始地图操作
})vue-$meit// 子组件
methods:{
iclick(){
let data = {
a:'data'
};
this.$emit('ievent', data1, 'data2Str');
}
}
// 父组件
// 核心代码
在组件中调用bing Map通用组件
// 引入bingMap
import bingMapsLayer from 'bingMap.vue'
// component中定义
components: {
bingMapsLayer
},
// template中使用