[Vue] 9. vue-amap高德地图初体验

 

效果：

就是get请求在URL后面输入名称，请求后台返回经纬度坐标后在地图上显示出来

实现：

1.main.js配置路由与引入高德地图配置

2.主界面 map.vue，实例化地图，调用api方法

3.api文件夹里的api.js  包括坐标转换函数，请求后台的函数 (略)

4.axios封装(略)

 

1.main.js

首先要npm  install  vue-amap --save 安装

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 高德的key
  key: '在高德地图api中心申请',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.15'
});

2. 主界面map.vue

 

先初始化信息

           <el-amap
              :plugin="plugin"
              :amap-manager="amapManager"  //绑定地图管理器
              :zoom="zoom"                 //放大倍数
              :center="center"             //绑定地图中心
              vid="amapDemo"               //地图类型
              ref="reds"
              style="width:100vw;height:100vh"
              :events="events">
           </el-amap>

<script>
import { AMapManager } from "vue-amap";
import {getShipState,transformWGS84ToGCJ02} from '@/api/getshipstate'

let amapManager = new AMapManager();//地图管理器
var map = amapManager.getMap();//地图示例

export default {
data() {
    return {
        //map
        amapManager,
        center: [116.303843, 39.983412],
        plugin: [
          {
            pName: "Scale",
            events: {
              init(instance) {
              console.log(instance);
              }
            }
          }
        ],
        zoom: 12,
        events: {
        },
     }
},
methods:{
    //声明方法
},
mounted(){
    //加载好后执行的语句
}
</script>

 

然后我们在methods里声明getFuck()方法，在mounted里this.getFuck()调用，这样等页面进入时就会自动调用

重点是一些高德地图内置的api

比如 

let map= amapManager.getMap()//获取地图实例

map.setZoomAndCenter(13, t)//设置地图中心函数等

     getFuck() {

        let shipmsg = this.$route.query.shipmsg//获取get请求上的参数
        let key=this.$route.query.key//获取get请求上的参数
        //console.log("shipmsg:"+shipmsg)
        if(shipmsg!=null){
            getShipState(shipmsg).then((res)=>{
              
              let Ackcod=res.Ackcod
              if(Ackcod==0){
                 alert("暂无数据")
              }else{
                 
                  let lng=res.Data[0].JD
                  let lat=res.Data[0].WD
                  let tim=res.Data[0].CJSJ
                  tim=tim.substring(0,tim.length-3)
                  console.log("后台返回的lng:"+lng+" lat:"+lat)
                  let t=transformWGS84ToGCJ02(lng,lat)//转换成GCT02格式
                
                  let map= amapManager.getMap()//获取地图实例
                  map.setZoomAndCenter(13, t)//设置地图中心函数
                      
                      
                      //新建坐标点
                      let marker= new AMap.Marker({
                      icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                      position: t,
                      offset: new AMap.Pixel(-13, -30)
                      });
                      marker.setMap(map)//将坐标点应用于地图实例

                      //新建文本框
                      var text = new AMap.Text({
                      text:shipmsg,
                      anchor:'center', // 设置文本标记锚点
                      draggable:true,
                      cursor:'pointer',
                      angle:0,
                      style:{
                          'padding': '.75rem 1.25rem',
                          'margin-bottom': '1rem',
                          'border-radius': '.25rem',
                          'background-color': 'rgba(255, 255, 255, .4)',
                          'width': '13rem',
                          'border-width': 0,
                          'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                          'text-align': 'center',
                          'font-size': '20px',
                          'color': 'blue'
                      },
                      position: t,
                      offset: new AMap.Pixel(10, -63)
                      });
                      text.setMap(map)

                      //新建文本框
                      var text2 = new AMap.Text({
                      text:tim,
                      anchor:'center', // 设置文本标记锚点
                      draggable:true,
                      cursor:'pointer',
                      angle:0,
                      style:{
                          'padding': '.75rem 1.25rem',
                          'margin-bottom': '1rem',
                          'border-radius': '.25rem',
                          'background-color': 'rgba(255, 255, 255, .4)',
                          'width': '13rem',
                          'border-width': 0,
                          'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
                          'text-align': 'center',
                          'font-size': '20px',
                          'color': 'blue'
                      },
                      position: t,
                      offset: new AMap.Pixel(10, -20)
                      });
                      text2.setMap(map)

              }
             
            })
        }
        else{
          console.log("over")
        }

    },

3.请求后台的函数getShipState 这个随便写写就好了，灵活处理

文档地址：https://lbs.amap.com/api/javascript-api/summary