Verwenden Sie die globale Datenbank im Vue-Projekt

Dieses Mal werde ich Ihnen einige Vorsichtsmaßnahmen bei der Verwendung einer globalen Datenbank in einem Vue-Projekt vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Schreiben Sie es vorne

Es scheint, dass nur Baidu Maps eine globale Datenbank in China hat, nicht Amap, Sogou oder Tencent. aber Da die Daten von Baidu Map nicht rechtzeitig aktualisiert werden, ist es am besten, bingMap zu verwenden, wenn verwandte Projekte durchgeführt werden, die die Verwendung ausländischer Daten erfordern.

Tutorial zur Verwendung von Bing Map (Grundkenntnisse)

Referenzdokument: Offizielles Tutorial zu Bing Map

Bing Map-Initialisierung

Einführung von Bing-Map-Ressourcen

<script type=&#39;text/javascript&#39; src=&#39;http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[YOUR_BING_MAPS_KEY]&#39; async defer></script>

Initialisierungskarte

<p id="myMap"></p>
<script type=&#39;text/javascript&#39;>
 function GetMap()
 {
  var map = new Microsoft.Maps.Map('#myMap');
  //Add your post map load code here.
 }
</script>

Kartensteuerungsparameter festlegen

Gemeinsame Steuerungsparameter
Zweig
Welcher Zweig des Karten-SDKs geladen werden soll: Release (Standard), experimentell
Rückruf
Rückruf nach dem Laden des Kartensteuerungsskripts (Standard: GetMap)
key
userKey, der vom Benutzer verwendet wird (Details)
setLang
Gibt die für Kartenbeschriftungen und Navigationssteuerelemente verwendete Sprache an
Häufig verwendet: Festlandchina (zh-CN), Hongkong (zh-HK), vereinfachtes Chinesisch (zh-Hans), Taiwan (zh-TW), Englisch-UK (en-GB), Englisch-USA (en-US)
setMkt (Details)
UR (Details)

Kartenereignis zu Bing Map hinzufügen (Referenz)

// 核心代码-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'); });

Bing Map Pin hinzufügen (Details )

Einfaches Pin-Beispiel

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);
}

demo_1

demo_2

Benutzerdefinierte Bild-Pins hinzufügen (Details)

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);
}

Pins mit benutzerdefinierten Symbolen

Bing Map fügt Ereignisse zu Pins hinzu

Kerncode

//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'); });

Bing Map fügt Hover-Stil zu Pins hinzu

Der Kern ist still für bing Map Ereignisse zu Push-Pins hinzufügen und den Stil von Push-Pins durch Ereignisse ändern

// 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 });
});

Hover-Stil zu Push-Pins hinzufügen

fester Ankerpunkt der Bing-Karte

Eines der häufigsten Probleme, auf die Entwickler bei der Verwendung benutzerdefinierter Pins stoßen, besteht darin, dass es beim Zoomen der Karte so aussieht, als würde der Pin hin oder weg wandern womit es verankert ist. Standort. Dies liegt an falschen Ankerpunktwerten in den Pin-Optionen. Der Ankerpunkt gibt an, welche Pixelkoordinate des Bildes, relativ zur oberen linken Ecke des Bildes, die Pin-Positionskoordinate überlappen soll.

Allgemeine Konfigurationsreferenz

Bing Map wird in Vue verwendet

Probleme, die bei der Einführung von Bing Map in Vue auftreten können

Da Vue beim Importieren im Allgemeinen auf Plug-Ins von Drittanbietern verweist, treten bei der Verwendung von Skript-Tags zur Einführung des Bing Map SDK in HTML zwei Probleme auf.

1 Es wird ein Fehler gemeldet Konsole :Mirosoft ist nicht definiert

2.vue-cli meldet einen Fehler:Mirosoft ist nicht definiert

Der Grund liegt im asynchronen Laden, sodass beim Aufruf möglicherweise nicht auf das SDK verwiesen wird „Mirosorft“ erfolgreich

Fehler „Mirosoft ist nicht definiert“ behoben

Dokumentreferenz

Der Fehler „Mirosoft ist nicht definiert“ wurde behoben, sofern die relevanten Werkzeugklassen vor dem Aufruf der Karte korrekt in das Projekt eingeführt werden können.

// 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("加载成功...")
   // 开始地图操作
 })

Bing Map-Komponente in Vue integrieren

Die Funktionen, die erreicht werden müssen

在vue项目中成功加载bing Map （完成）
当点击bing Map的时候，返回点击点的经纬度 （完成）
子组件触发事件返回参数到父组件
当已有经纬度的时候，加载bingMap自动显示其经纬度所在的位置并设置图钉 （待完成）
子组件触发事件返回参数到父组件

实现原理

vue-$meit

核心代码

// 子组件
<template>
<p @click="iclick"></p>
</template>
methods:{
 iclick(){
  let data = {
   a:'data'
  };
  this.$emit('ievent', data1, 'data2Str');
 }
}
// 父组件
<i-template @ievent = "ievent"></i-template>
methods:{
 ievent(...data){
  console.log('allData:',data); // data为包含传过来所有数据的数组，第一个元素是对象，第二个元素是字符串
 }
}

封装bing Map通用组件

// 核心代码
<template>
 <p class="map-container">
  <p id="localMap"></p>
 </p>
</template>
<script>
import initBingMap from './initMap.js'
export default {
 data () {
  return {
   lngNum: null, // 经度
   latNum: null, // 纬度
  }
 },
 created: function () { 
  let _this = this;
  initBingMap.init()
  .then((Microsoft) => {
   console.log(Microsoft)
   console.log("加载成功...")
   _this.initMap();
  })
 },
 methods: {
  initMap () {
   let _this = this;
   let map = new Microsoft.Maps.Map('#localMap', {
    credentials: 'AgzeobkGvmpdZTFuGa7_6gkaHH7CXHKsFiTQlBvi55x-QLZLh1rSjhd1Da9bfPhD'
   });
   Microsoft.Maps.Events.addHandler(map, 'click', _this.getClickLocation);
  },
  getClickLocation (e) {
   //若点击到地图的标记上，而非地图上
   let [_this, loc] = [this, null];
   if (e.targetType == 'pushpin') {
    loc = e.target.getLocation();
   }
   //若点击到地图上
   else {
    var point = new Microsoft.Maps.Point(e.pageX, e.pageY);
    loc = e.target.tryPixelToLocation(point, Microsoft.Maps.PixelReference.page);
   }
   console.log(loc.latitude+", "+loc.longitude);
   console.log(loc);
   _this.lngNum = loc.longitude;
   _this.latNum = loc.latitude;
   let data = {
    lngNum: _this.lngNum,
    latNum: _this.latNum
   }
   this.$emit('getLocationNums',data);
  },
 }
}
</script>
<style scoped>
 .map-container {
  width: 100%;
  height: 400px;
  border: 1px solid #000;
 }
</style>
在组件中调用bing Map通用组件
// 引入bingMap
import bingMapsLayer from 'bingMap.vue'
// component中定义
components: {
 bingMapsLayer
},
// template中使用
<bing-maps-layer @getLocationNums="getLocationNums"></bing-maps-layer>
// 定义触发点击标记返回经纬度的事件函数
getLocationNums (...data) {
 let _this = this;
 console.log('click');
 console.log(data);
 // 这里的data中即子组件bingMap返回的点击获取的经纬度值
},

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue组件做出无限级多选菜单

使用webpack做出ReactApp

Das obige ist der detaillierte Inhalt vonVerwenden Sie die globale Datenbank im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!