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

Vue中高德地图的使用

1. 在index.html中引入

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

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

3.1 导入

3.2 使用

3.3 个人data

4.个性化地图的用法

4.1 在高德地图制做好本身的自定义样式 并生成连接

4.2 只须要添加mapStyle属性 ,属性值为你生成的连接便可

4.1 在高德地图制做好本身的自定义样式并生成连接