Vue中高德地图的使用

作者: 羽翼的翼 | 来源:发表于2019-06-12 17:59 被阅读5次

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

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

    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: '郑州市'
             }
    

    如图:

    这个是刚进入什么都没有的情况


    Snipaste_2019-06-12_17-48-48.png

    这个是点击地图之后的情况

    Snipaste_2019-06-12_17-50-26.png

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

    如图:


    Snipaste_2019-06-12_17-50-59.png

    相关文章

      网友评论

        本文标题:Vue中高德地图的使用

        本文链接:https://www.haomeiwen.com/subject/jwhrfctx.html