vue项目使用高德地图

爱睡D小猪

已于 2022-07-13 22:04:33 修改

阅读量3.1k

点赞数 4

分类专栏：高德地图文章标签： javascript css vue.js

于 2021-06-20 14:27:27 首次发布

本文链接：https://blog.csdn.net/ZhouLoverBrother/article/details/118068962

版权

高德地图专栏收录该内容

5 篇文章 2 订阅

订阅专栏

vue项目使用高德地图-部分功能介绍

在此做个笔记，引入方式使用了高德2.0 loadsh的加载方式

1、引入高德地图方式-NPM

npm i @amap/amap-jsapi-loader --save

在页面引入
import AMapLoader from “@amap/amap-jsapi-loader”

这是官网的引入介绍，在版本version我想引入2.0，写了2.0被报错key409那个报错，意思是我调用了我没权限的api服务，调错东西。后面我改成默认的才成功渲染

//在vue的index.html中引入安全秘钥，官网有两种方式，我没服务器啥的用明文了
<script>
  window._AMapSecurityConfig = {
      securityJsCode:'秘钥',
    };
</script>


AMapLoader.load({
    "key": "",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
        "version": '1.1',   // AMapUI 缺省 1.1
        "plugins":[],       // 需要加载的 AMapUI ui插件
    },
    "Loca":{                // 是否加载 Loca， 缺省不加载
        "version": '1.3.2'  // Loca 版本，缺省 1.3.2
    },
}).then((AMap)=>{
    map = new AMap.Map('container');
}).catch(e => {
    console.log(e);
})

2、先看地图效果
以下的功能，涉及，地图主题的更改，点标记的点击事件，信息弹窗的自定义内容，生成marker点；
下面是目前地图的效果
在这里插入图片描述

以下是我的代码，以及做的功能，点标记和信息窗体
1、创建地图实例，并且引入需要的插件
2、我需要的功能是，实现通过后端数据，渲染maker点标记，并且点击点标记会定位到当前maker的视野，并且弹窗自定义内容的信息弹窗，
3、里面还有个方法是获取点击地图的地理信息编码，获取到经纬度，再生成一个maker 渲染到map地图上，这个api需要权限，我的key是个人开发者
4、不习惯一段一段截图，我感觉不够清晰，我直接截图整个methods的方法，在方法写了备注。

<div id="map">
    <div id="container"></div>
    <infoModal v-show="showInfo" :infoObj="infoObj" ref="info" @closeInFo="closeInFo" />
  </div>

import infoModal from "@/components/infoModal.vue"
 data() {
    return {
      map: null,
      geocoder: null, // 地理编码与逆地理编码类，用于地址描述与坐标之间的转换
      infoWindow: null, // 用于在地图上弹出一个详细信息展示窗体
      showInfo:false, // 控制信息窗体的组件隐藏
      infoObj:{  // 传递给信息弹窗的数据
        title:"项目介绍",
         contentList:[{code:"编号：SSSSSSDEJUW",num:"创航向：126°"},{code:"编号：SSSSSSDEJUW",num:"创航向：126°"}]
      }
    }
  },
mounted() {
    this.loadmap()
  },
methods{
async  loadmap() {
    await this.handelAllRquest(); //请求数据的方法
      const that = this
      AMapLoader.load({
        key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
        // version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.Geocoder", " AMap.InfoWindow", "AMap.ToolBar",'AMap.SimpleInfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: "1.1", // AMapUI 缺省 1.1
          plugins: [], // 需要加载的 AMapUI ui插件
        },
      })
        .then((AMap) => {
         // 创建一个地图实例
          that.map = new AMap.Map("container", {
            resizeEnable: true,
            zoom: 4, // 这个是控制视野的距离，越小，地图显示越大，这个zoom =4，渲染的时候是中国地图的视野
            pitch: 4, // 地图俯仰角度，有效范围 0 度- 83 度，即开启3D地图的扁平程度
            viewMode: "3D", // 地图模式
          })
          //给地图新增缩放条，和 地图左下角的海里控件
          that.map.addControl(new AMap.Scale())
          that.map.addControl(new AMap.ToolBar())
          //  that.map.setMapStyle('amap://styles/blue');  控制地图主题的api，darkblue是极夜蓝，下面会贴出我的地图效果
           that.map.setMapStyle('amap://styles/darkblue');
          // 地理编码与逆地理编码类，用于地址描述与坐标之间的转换
          that.geocoder = new AMap.Geocoder()
          // 创建信息弹窗实例，用于在地图上弹出一个详细信息展示窗体
          that.infoWindow =  new AMap.InfoWindow({
            isCustom: true,  //使用自定义窗体，则默认的样式都没
            offset: new AMap.Pixel(0, -35),//控制弹窗的偏移量
          })
          //这个是通过获取到后端数据的经纬度，通过循环生成 maker点(点标记)
          for (let i = 0, marker; i < lnglats.length; i++) {
            let marker = new AMap.Marker({
              position: lnglats[i],
              map: that.map,
              extData:{title:'我是帅哥',content:"6666666666"}
            })
            // 设置点标记的动画效果，此处为弹跳效果
            // marker.setAnimation("AMAP_ANIMATION_BOUNCE")
            //这个是注册maker的点击事件
            marker.on("click", that.markerClick)
            // marker.emit("click", { target: marker })  这个会自动打开for循环的最后一个maker点的信息
          }
          that.map.setFitView() // 当生成marker后 设置地图map
          that.map.setZoom(3.9) // 当渲染maker后，一开始地图实例的zoom好像被maker的控件修改了，所以在代码后面重设zoom，我的需求是一开始展示是中国地图，这个看自己需求
          that.map.setPitch(25) // 设置pitch的角度
          // // 地图绑定点击事件
          that.map.on("click", (event) => {
           //这个其实就是 点击地图，生成一个maker的功能
            that.addMrker(event.lnglat)
          })
        })
        .catch((e) => {
          console.log(e, "高德地图加载失败")
        })
    },
    // 地图点击增加标记点
    addMrker(position) {
      // 点击marker展示信息弹框
      const _this = this
      // 根据点击位置经纬度查询详细信息，key需要调用api权限
      this.geocoder.getAddress([position.lng, position.lat], (status, result) => {
        if (status === "complete" && result.info === "OK") {
          console.log("成功查询地址")
          this.map.clearInfoWindow() // 清楚地图上的信息弹窗
          const marker = new AMap.Marker({
            map: _this.map,
            position: new AMap.LngLat(position.lng, position.lat),//marker经纬度设置
            size: new AMap.Size(60, 26),//marker大小
            offset: new AMap.Pixel(-10, -33),
            extData: result.regeocode, // 信息窗展示信息，这个属性，是用于自定义点击marker显示弹窗内容的，可以用marker.getExtData()获取到自定义的数据
          })
          // 点击marker展示信息弹框
          marker.on("click", (e) => {
            // _this.addInfowindow(marker)
          })
          _this.map.add(marker) //新增marker
          marker.setMap(_this.map) //重置map
        }
      })
    },
    //标记点 点击事件
    markerClick(e) {
      this.showInfo = false; // 控制信息弹窗
     let obj = e.target.getExtData();//获取maker的自定义数据
     this.showInfo = true;
     this.infoObj.title = obj.title // infoObj是传递给信息弹窗组件的数据
     this.infoWindow.setContent(this.$refs.info.$el)//这个是获取整个弹窗的组件dom，绘画到infoWindow控件里面，setContent可识别html字符串
     this.infoWindow.open(this.map,e.target.getPosition());//控制infoWindow控件，打开，传递经纬度

      // this.infoWindow.setContent(e.target.content)  原生信息窗体的api
      // this.infoWindow.open(this.map, e.target.getPosition())
      // let marker = new AMap.Marker()
      // let option = [e.lnglat.lng, e.lnglat.lat]
      // //  marker.setMap(this.map);
      // marker.setPosition(option)
      this.map.setCenter(e.target.getPosition()) // 这个是设置地图的中心点视野
      this.map.setZoom(15)
    },
    //关闭弹窗
    closeInFo(value) {
        this.infoWindow.close()
        this.showInfo = value;
    },

}

以下是弹窗的组件代码

<template>
    <div ref="info">
          <div class="btn btn-primary btn-ghost btn-shine">
          <div class="title">
            <span>{{ infoObj.title}}</span>
            <span @click="handleCloseInFo()">x</span>
          </div>
          <div class="content-item" v-for="(item,index) in infoObj.contentList" :key="index">
              <span class="m-rigth">编号：{{item.code}}</span>
              <span class="" style="color: #fff !important;">创航向：{{item.num}}</span>
          </div>
      </div>

    </div>
</template>

<script>
export default {
   name: 'info',
    props: {
      infoObj:{
        type:Object,
        default:()=>{
            return   {
            title:"项目介绍",
             contentList:[{code:"编号：SSSSSSDEJUW",num:"创航向：126°"},{code:"编号：SSSSSSDEJUW",num:"创航向：126°"}]
          }

        }
      }

    },
  
    data() {
        return {

        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {
      handleCloseInFo(){
        this.$emit('closeInFo',false)
      }

    },
};
</script>

<style scoped lang="less">
.title{
  display:flex;
  align-items: center;
  justify-content: space-between;
  font-size:14px;
  font-weight: 600;
  margin-bottom: 5px;
}
.content-item{
  font-size:12px;
}
.m-rigth{
 margin-right:10px;
}
.btn {
  width:100%;
  height:100%;
  --hue: 190;
  position: relative;
  padding:8px 10px 10px 10px;
  font-size: 1rem;
  line-height: 1.5;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  background: #1A1E23;
  border: 1px solid hsl(var(--hue), 100%, 41%);
  outline: transparent;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: 0.25s;
  z-index:999999 !important;

  &-primary {
    --hue: 187;
  }

  &-ghost {
    color: hsl(var(--hue), 100%, 41%);
    background-color: transparent;
    background: #1A1E23;
  }

  &-shine {
    color: white;

    &::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
     background: transparent;
      transform: translateX(-100%);
      transition: 0.6s;
    }
    box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);

   
  }
}
</style>

爱睡D小猪

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
vue项目使用高德地图

vue项目使用高德地图-部分功能介绍在此做个笔记，引入方式使用了高德2.0 loadsh的加载方式1、引入高德地图方式-NPMnpm i @amap/amap-jsapi-loader --save在页面引入import AMapLoader from “@amap/amap-jsapi-loader”这是官网的引入介绍，在版本version我想引入2.0，写了2.0被报错key409那个报错，意思是我调用了我没权限的api服务，调错东西。后面我改成默认的才成功渲染AMapLoad
复制链接

扫一扫