Vue中高德地圖的使用

時間 2019-12-06

標籤 vue 地圖使用简体版

原文原文鏈接

介紹: 該地圖包含功能有:javascript

點擊地圖自動獲取定位和經緯度到文本框
文本框輸入地址失去焦點後自動得到經緯度

1. 在index.html中引入

<!--引入高德地圖JSAPI -->
           <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=你的Key值"></script>
           <!--引入UI組件庫（1.0版本） -->      
           <script src="http://webapi.amap.com/ui/1.0/main.js"></script>
           <script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>   
           <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
     </head>
     <body>
       <div id="app"></div>
       <!-- built files will be auto injected -->
       <script>
          // 爲了防止報map未定義這個錯誤
         window.onload=function(){
           var map
         }
       </script>
     </body>
複製代碼

2. 在webpack.base.conf.js中的操做

在module.exports中添加如下代碼css

externals: {
   
       'AMap': 'AMap'
   
     }
複製代碼

3. 在引入的文件中的操做

3.1 導入

import AMap from 'AMap'   // 這是爲了防止報錯說AMap is not defined
複製代碼

3.2 使用

template中的操做
   <div id="map-container" class="map_box">
   </div>

   // 地圖的操做
     mounted() {
       var this_ = this
       // 加入高的地圖
       console.log(3)
       map = new AMap.Map('map-container', {
         resizeEnable: true,
         zoom: 15
       })
       AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
         console.log(1)
         map.addControl(new AMap.ToolBar())
         map.addControl(new AMap.Scale())
       })
       AMap.service('AMap.Geocoder', function() { // 回調函數
   
       })
       // 加載搜索列表
       this_.myMapViewLocation()
       map.on('click', function(e) {
         this_.commitFrom.Longitude = e.lnglat.lng
         this_.commitFrom.Latitude = e.lnglat.lat
         // 填寫地址
         this_.writeAddress([e.lnglat.lng, e.lnglat.lat])
         this_.mapsearch()
         this_.addMarker([e.lnglat.lng, e.lnglat.lat])
       })
       // placeSearch.search("北京")
     },
     methods: {
       // 地圖start
       // 地圖搜索
       mapsearch() {
         this.myMapViewLocation(this.commitFrom.Longitude, this.commitFrom.Latitude)
       },
       // 回顯
       myMapViewLocation(mlon, mlat) {
         var this1 = this
         // console.log("回顯座標")
         if (mlon && mlat) {
           // removeMarkers(lnglatXY)
           lnglatXY = [mlon, mlat]
           this1.addMarker(lnglatXY)
         }
       },
       // 移除以前的標點
       removeMarkers(lnglatXY) {
         marker = new AMap.Marker({
           map: map,
           position: lnglatXY,
           icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
           offset: new AMap.Pixel(-13, -30)
         })
         var markers = []
         markers.push(marker)
         map.remove(markers)
       },
       // 實例化點標記
       addMarker(lnglatXY) {
         if (t === 1) {
         // console.log(lnglatXY)
           marker = new AMap.Marker({
             icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
             position: lnglatXY,
             offset: new AMap.Pixel(-13, -30),
             // 設置是否能夠拖拽
             draggable: true,
             cursor: 'move',
             // 設置拖拽效果
             raiseOnDrag: true
           })
           marker.setMap(map)
           map.setFitView() // 執行定位
           t++
         }
         // 修改標點位置
         if (t !== 1) {
           marker.setPosition(lnglatXY)
           map.setCenter(lnglatXY)
           marker.setMap(map)
           map.setFitView() // 執行定位
         }
       },
       // 填寫地址
       writeAddress(lnglatXY) {
         var this2 = this
         var geocoder = new AMap.Geocoder({
           city: '重慶', // 城市，默認：「全國」
           radius: 1000 // 範圍，默認：500
         })
         geocoder.getAddress(lnglatXY, function(status, result) {
           if (status === 'complete' && result.info === 'OK') {
             var add = result.regeocode.formattedAddress
             var arr = add.split('省')
             if (arr.length > 1) {
               arr = arr[1]
             } else {
               console.log('我不是直接的省')
               arr = add.split('自治區')
               // console.log(arr)
               if (arr.length > 1) {
                 arr = arr[1]
               } else {
                 arr = arr[0]
               }
             }
             // console.log(arr)
             this2.commitFrom.Address = arr
           }
         })
       },
       // 地址回調
       geocoder_CallBack(data) {
         // var address = data.city + data.district + data.street + data.streetNumber + data.township //返回地址描述
         var address = data // 返回地址描述
         this.commitFrom.Address = address
       },
       // 根據地址搜索
       markLocation() {
         var that = this
         var address = that.commitFrom.Address
         AMap.plugin('AMap.Geocoder', function() {
           var geocoder = new AMap.Geocoder()
           geocoder.getLocation(address, function(status, result) {
             if (status === 'complete' && result.info === 'OK') {
               // 經緯度
               var lon = result.geocodes[0].location.lng
               var lat = result.geocodes[0].location.lat
               that.commitFrom.Longitude = lon
               that.commitFrom.Latitude = lat
               lnglatXY = [lon, lat]
               that.addMarker(lnglatXY)
             } else {
               console.log('定位失敗！')
             }
           })
         })
       }
     }
       // 地圖end
複製代碼

3.3 個人data

commitFrom: {
           // 地圖
           Longitude: null,
           Latitude: null,
           Address: '鄭州市'
         }
複製代碼

圖示:html

這個是沒有點擊時候的狀態 java

這個是點擊以後的狀態

4.個性化地圖的用法

4.1 在高德地圖製做好本身的自定義樣式並生成連接

4.2 只須要添加mapStyle屬性 ,屬性值爲你生成的連接便可

mounted() {
    map = new AMap.Map('map-container', { // map-container爲你地圖容器的ID
      resizeEnable: true,
      zoom: 4,
      center: [100.397428, 39.90923], // 初始化地圖中心點
      mapStyle: 'amap://styles/0f082e8cdcc5879e0ea84a6'  // 此爲你的帳號生成的連接,這裏只是例子
    })
  }
複製代碼

圖示:webpack