ホームページ > 記事 > ウェブフロントエンド > vue-baidu-map をページに挿入して自動的に配置する方法
今回は、ページに入るときにvue-baidu-mapを自動的に配置する方法を説明します。ページに入るときにvue-baidu-mapが自動的に配置される注意事項は何ですか。以下は実際的なケースです。一見。
実は私も以前にこの問題で悩んだことがありますが、解決策が見つかりませんでした。私が思い切って GitHub で上司に問題を提起したのは今日になって初めてでした。それで目が覚めました。実際、それは私がすぐに成功することに熱心すぎて、vue-baidu-map が提供するリファレンス ドキュメントを注意深く読んでいなかったことが原因でした。あるいは、読んだだけで忘れてしまったのかもしれません。 まず最初に明確にしておきます (文書からの原文): Baidu Map JS API には JSONP という 1 つの読み込みメソッドしかないため、BaiduMap コンポーネントとそのすべてのサブコンポーネントのレンダリングは非同期でのみ行うことができます。したがって、マップ API がロードされた後にのみ実行できるコードを実行するには、コンポーネントの Ready イベントを使用してください。このような時点でモデル レイヤーを変更することはもちろん、vue 自体のライフサイクル で BMap クラスを呼び出そうとしないでください。
間違った使い方
私が試してみたところ、上記の方法は実行可能で効果が見られるようですが、作者が提供する正しい方法を使用する方が良いでしょう!正しい使い方
この方法をオススメします!ページ入力時の自動配置の問題を解決する次の方法もここにあります。 以下は私の書き方です。参考程度にしてください。欠点があればご指摘ください。私はただの初心者です(笑)! テンプレート:<template> <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" @load="loadding" :scroll-wheel-zoom="true" :mapStyle="{styleJson: styleJson}"> <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true" :locationIcon="{url: require('../../svg/location.svg'), size: {width: 18, height: 18}}" @locationSuccess="getLoctionSuccess" @locationError="getLocationError"> </bm-geolocation> <!-- 自定义定位图标覆盖物 --> <bm-marker :position="autoLocationPoint" :icon="{url: require('../../svg/location.svg'), size: {width: 18, height: 18}}" v-if="initLocation"> </bm-marker> </baidu-map> </template>JS 実装:
<script> export default { data () { return { // 省略一部分 autoLocationPoint: {lng: 0, lat: 0}, initLocation: false, } }, methods: { handler ({BMap, map}) { let _this = this; // 设置一个临时变量指向vue实例,因为在百度地图回调里使用this,指向的不是vue实例; var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ console.log(r); _this.center = {lng: r.longitude, lat: r.latitude}; // 设置center属性值 _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude}; // 自定义覆盖物 _this.initLocation = true; console.log('center:', _this.center) // 如果这里直接使用this是不行的 },{enableHighAccuracy: true}) // 下面注释是百度地图API官方实现方法,因为我使用自定义图标覆盖物,所以没有使用这种方法! // 如使用以下这种方法,那么我Template里所写的自定义定位图标代码是不需要的 // var geolocation = new BMap.Geolocation(); // geolocation.getCurrentPosition(function(r){ // if(this.getStatus() == BMAP_STATUS_SUCCESS){ // var mk = new BMap.Marker(r.point); // map.addOverlay(mk); // map.panTo(r.point); // alert('您的位置:'+r.point.lng+','+r.point.lat); // } // else { // alert('failed'+this.getStatus()); // } // },{enableHighAccuracy: true}) } } } </script>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
vue コンポーネントを使用してポップアップ ボックスのクリックによる表示と非表示を実装する方法
以上がvue-baidu-map をページに挿入して自動的に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。