フロントエンドvueはどうやって高徳地図を使いますか？

3887 ワード

vue ハイド地図

まず、キーを登録します
1、開発者アカウントを登録するは、高徳開放プラットフォームの開発者となる。
2、ログイン後、「アプリケーション管理」ページ「新規アプリケーションの作成」に入ります。
3、アプリケーションのためにKeyを追加します。「サービスプラットフォーム」の一つは「Web端（JSAPI）」を選択してください。
そして、コードを書きます。
vuecliで publicフォルダのindex.を追加して導入します。 JS APIの入り口シナリオラベル


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="./iconLink.png" rel="external nofollow" >
  <title>    </title>
　　　 <!--       script  body  ，       -->
  <script type="text/javascript" src="http://webapi.amap.com/maps?v=2.0&key=d6c35bb2619f107f86ccda4b378415f6&plugin=AMap.MouseTool"></script> <!--     key，        （        ） -->
　　 <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script> <!--        ui  --> </head> <body> <div id="app"></div> </body>
</html>

vue.co nfig.jsで構成を修正します。


module.exports = {
  publicPath: "./",
  configureWebpack: {
    externals: {
      AMap: 'window.AMap',
      AMapUI: 'window.AMapUI' //       
    },
  }
};

次に、本格的にvueコンポーネントを書きます。
余計なことを言わないで、直接コードしてください。


<template>
  <div class="map_wrapper">
    <div class="box">
      <div id="container" style="width: 100%; height: 500px"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
@Component({
})
export default class page extends Vue {　　 //    import AMap from 'amap';        Cannot find module 'amap';          
  protected AMap: any = (window as any).AMap;
  protected AMapUI: any = (window as any).AMapUI;
　　 //     created    "Error: Map container div not exist"
  mounted() {
      let map = new this.AMap.Map('container', {
        center: [121.227577, 31.101471], //      
        resizeEnable: true, //             
        zoom: 10, //        ，         
        showMarker: true, //                  ，  ：true
      });

      //  SimpleInfoWindow，loadUI           'ui/'      
      this.AMapUI.loadUI(['overlay/SimpleInfoWindow'], (SimpleInfoWindow: any) => {
        let marker = new this.AMap.Marker({
          map: map,
          zIndex: 9999999,
          position: map.getCenter(),
        });

        let infoWindow = new SimpleInfoWindow({
          infoTitle: '<strong>     </strong>',
          infoBody: '<p>     。</p>',
          offset: new this.AMap.Pixel(0, -31), //       
        });
        //   map 
        function openInfoWin() {
          infoWindow.open(map, marker.getPosition());
        }
        marker.on('click', () => {
          openInfoWin(); //          
        });
        openInfoWin();
      });
  }
}
</script>

<style scoped lang="scss"></style>

ページ効果は以下の通りです

以上はフロントエンドvueが高徳地図をどのように使うかの詳細です。vue高徳地図に関する資料は他の関連記事に注目してください。

SQL削除文DROP、TRUNCATE、DELETEの違い

Informatica bulkとnormalモードの深さは詳しく説明します。