Vue中高德地图的使用

最新推荐文章于 2024-05-01 00:57:40 发布

weixin_33861800

最新推荐文章于 2024-05-01 00:57:40 发布

阅读量549

点赞数

文章标签： javascript ui webpack ViewUI

原文链接：https://juejin.im/post/5d00d029e51d4510aa0114e9

版权

介绍: 该地图包含功能有:

点击地图自动获取定位和经纬度到文本框
文本框输入地址失去焦点后自动获得经纬度

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中添加以下代码

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: '郑州市'
         }
复制代码

图示:

这个是没有点击时候的状态

这个是点击之后的状态

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'  // 此为你的账号生成的链接,这里只是例子
    })
  }
复制代码

图示:

转载于:https://juejin.im/post/5d00d029e51d4510aa0114e9

weixin_33861800

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue中高德地图的使用

介绍: 该地图包含功能有:点击地图自动获取定位和经纬度到文本框文本框输入地址失去焦点后自动获得经纬度1. 在index.html中引入  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=你...
复制链接

扫一扫