vue中使用地图，展示标记点，信息窗体等

我这里使用的是vue-amap，简单介绍一下vue-amap 是一套基于 Vue 2.0 和高德地图的地图组件。

1.安装

npm install -S vue-amap

2.引入

main.js

import AMap from 'vue-amap';
Vue.use(AMap);

AMap.initAMapApiLoader({
    // 申请的高德key
    key: '8fbdd9a3ff6bc2ec653efb9481903eaa',
    // 插件集合
    plugin: [
        "AMap.Geolocation",
        //定位控件，用来获取和展示用户主机所在的经纬度位置
        "AMap.Autocomplete",
        //输入提示插件
        "AMap.PlaceSearch",
        //POI搜索插件
        "AMap.Scale",
        //右下角缩略图插件 比例尺
        "AMap.OverView",
        //地图鹰眼插件
        "AMap.ToolBar",
        //地图工具条
        "AMap.MapType",
        //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        "AMap.PolyEditor",
        //编辑 折线多，边形
        "AMap.RangingTool",
    ]
});

3.使用

3.1展示基础地图

<template>
  <div class="container df">
    <el-amap
      class="map_box"
      vid="amapDemo"
      :zoom="zoom"
      :center="center"
      :plugin="plugin"
      :attributionControl="attributionControl"
      :zoomControl="zoomControl"
    >
    </el-amap>
  </div>
</template>

<script>
export default {
  name: "text",
  data() {
    return {
      zoom: 17,//缩放
      center: [104.06, 30.67],//中心点位置
      plugin: [
        {
          pName: "Geolocation",
          events: {
            init(o) {
              o.getCurrentPosition((status, result) => {
                _that.lat = result.position.lat;
                _that.lng = result.position.lng;
                _that.center = [_that.lng, _that.lat];
                _that.current = [_that.lng, _that.lat];
                sessionStorage.setItem(
                  "LOCATION",
                  JSON.stringify(_that.current)
                );
                _that.isLoading = false;
                //  能获取定位的所有信息
              });
            },
          },
        },
      ],
      attributionControl: false, //隐藏高德地图logo
      zoomControl: false, //隐藏高德地图缩放控件
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.map_box {
  width: 100vw;
  height: 100vh;
}
</style>

3.2地图联动，动态展示坐标点，点击坐标点展示信息窗体

//坐标点
 <el-amap-marker
        v-for="(marker, index) in markers"
        :position="marker.position"
        :vid="index"
        :icon="marker.icon"
        :content="marker.content"
        :events="marker.events"
      ></el-amap-marker>
 //信息窗体   里面的内容可以自定义
 <el-amap-info-window
    v-if="window"
    :position="window.position"
    :visible="window.visible"
>
   <div @click="handleDetails(window)" class="amap-title df-f">
        <img :src="window.logo" alt="" />
        <p>{{ window.name }}</p>
   </div>
   <p class="amap-address">{{ window.address }}</p>
   <div class="amap-address">距离您{{ window.distance }}</div>
   <div class="service_list">
    <div
     class="service_box"
     v-for="(item, index) in window.venue_types"
     :key="index">{{ item.type_title }}*{{ item.count }}</div>
</div>
   <div class="amap-botext">数据来源：三生三世十里桃花</div>
   <div class="line"></div>
   <div class="bottom_img df-a">
   <img
      class="go_img"
      @click="handlePhone(window.contract_tel)"
      src="@/assets/icon-1.png"/>
     //跳转高德地图
    <img
      class="go_img"
      @click="handleGoto(window)"
      src="@/assets/icon.png"/>
 </div>
</el-amap-info-window>


//数据处理逻辑
  async getMarkers() {
      let self = this;
      self.venuelistData.map((item, index) => {
        // 后台获取数据,展示点
        self.markers.push({
          position: [item.longitude, item.latitude],
          icon: require("@/assets/loc.png"), //不设置默认蓝色水滴
          events: {
            click() {
              self.windows.forEach((value) => {
                value.visible = false; //关闭窗体
              });
              let distance = self.getdiscount(
                self.current[1],
                self.current[0],
                self.windows[index].position[1],
                self.windows[index].position[0]
              );
              self.window = {
                position: self.windows[index].position,
                name: self.windows[index].name,
                address: self.windows[index].address,
                venue_types: self.windows[index].venue_types,
                logo: self.windows[index].logo,
                contract_tel: self.windows[index].contract_tel,
                distance: distance,
                visible: false, //初始是否显示\
                id: self.windows[index].id,
              };
              self.$nextTick(() => {
                self.window.visible = true; //点击点坐标，出现信息窗体
              });
            },
          },
        });
        self.windows.push({
          position: [item.longitude, item.latitude],
          name: item.name,
          address: item.address,
          venue_types: item.venue_types,
          logo: item.logo,
          contract_tel: item.contract_tel,
          id: item.id,
          /*    offset: [5, -15], //窗体偏移 */
          visible: false, //初始是否显示
        });
        this.zoom = 13;
        this.isLoading = false;
      });
    },

//跳转高德地图
// 调起高德地图
    handleGoto(marker) {
      let UserLocation = marker.position;
      console.log(UserLocation);
      //current  当前坐标数据   
      window.open(`http://m.amap.com/navigation/carmap/saddr=${this.current[0]},${this.current[1]},起点&daddr=${UserLocation[0]},${UserLocation[1]}&sort=dist`
      );
    },