vue-amap高德地图

功能介绍(历史轨迹,一键导航,显示附近医院,公安局)
这篇相对于之前发的比较完整,思路比较清晰.

代码如下

 <template>
  <div class="content">
    <div class="amap-wrapper">
      <el-amap class="amap-box" vid="amap" :zoom="zoom" :center="center" :mapStyle="mapStyle">
        <el-amap-marker
          v-for="marker in markers"
          :position="marker.position"
          :key="marker.icon"
          :events="marker.events"
          :icon="marker.image"
        ></el-amap-marker>
        <el-amap-marker
          v-for="marker in peripherals"
          :position="marker.position"
          :key="marker.id"
          :events="marker.events"
          :icon="marker.image"
        ></el-amap-marker>
        <el-amap-info-window
          v-if="window"
          :position="window.position"
          :visible="visible"
          :content="window.content"
          :offset="window.offset"
        ></el-amap-info-window>
        <el-amap-info-window
          v-if="aabb"
          :position="aabb.position"
          :visible="visibles"
          :content="aabb.content"
          :offset="aabb.offset"
        ></el-amap-info-window>
        <el-amap-polyline :path="path" :visible="hide"></el-amap-polyline>
      </el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1, //计数器
      peripherals: [],
      obj: [], //存储查询周边的经纬度
      placeSearch: null,
      amap: null,
      hospital: [], //医院数据
      nearbyType: "综合医院|卫生院|公安警察",
      police: null,
      hospital: null,
      visible: false,
      visibles: false,
      hide: false,
      path: [],
      miter: "miter",
      center: [121.5273285, 31.25515044],
      zoom: 12,
      mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //设置地图样式
      markers: [],
      windows: [],
      wind: [],
      aabb: "",
      window: "",
      count:0,
      pointMarker: [
        {
          lng: 121.5273285,
          lat: 31.25515044,
          url: "../assets/img/student.png",
          title: "测试啊",
          name: "李逍遥",
          tel: "13762155556",
          id: "1",
          path: [
            [121.5389385, 31.21515044],
            [121.5389385, 31.29615044],
            [121.5273285, 31.21515044],
            [121.5273285, 31.25515044]
          ]
        },
        {
          lng: 121.536488,
          lat: 31.226337,
          url: "../assets/img/student.png",
          name: "景天",
          tel: "1376215555",
          id: "2",
          path: [
            [121.536488, 31.226337],
            [121.5389385, 31.21515044],
            [121.5389385, 31.29615044],
            [121.5273285, 31.21515044],
            [121.5273285, 31.25515044]
          ]
        }
      ]
    };
  },
  methods: {
    point() {
      let that = this;
      this.pointMarker.forEach((item, index) => {
        this.markers.push({
          position: [item.lng, item.lat],
          image: require("../assets/img/student.png"),
          events: {
            click(e) {
              that.wind = [];
              that.zoom = 14;
              that.windows.forEach(window => {
                that.visible = false; //关闭窗体
              });
              that.window = that.windows[index];
              that.$nextTick(() => {
                that.visible = true; //点击点坐标，出现信息窗体
                let J = e.target.B.position.lng; //保存经纬地址
                let W = e.target.B.position.lat;
                that.obj = [J, W];
                that.center=[J,W]
                that.placeSearchs();
              });
            }
          }
        });
        this.windows.push({
          position: [item.lng, item.lat],
          content: `<div>${item.text}</div>
            <div>姓名:${item.name}</div>
             <div>手机号:${item.tel}</div>
             <p style="color:blue" id='${item.id}'>历史轨迹</p>
             <a href="https://uri.amap.com/search">一键导航</a>
            `, //内容
          offset: [5, -15] //窗体偏移
        });
        this.markerClick(item);
      });
    },

    //信息窗体里面的点击事件
    markerClick(item) {

      var that = this;
      let id;
      window.addEventListener("click", e => {
        console.log(item)
        if (e.target.id==item.id) {
          id = e.target.id;
          that.visible = false; //关闭窗体
          //find 点击的那一项的所有数据
          let arr = this.pointMarker.find(ele => {
            if (ele.id == id) {
              return ele;
            }
          });
          this.path = arr.path;
          this.hide = true;
        }else if(e.target.tel==item.tel){
          
        }
      });
    },
    //一键导航
    navigartion(){

    },
    // 搜索周边
    placeSearchs() {
      var that = this;
      AMap.service(["AMap.PlaceSearch"], () => {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          type: "综合医院|卫生院|公安警察", // 兴趣点类别
          pageSize: 20, // 单页显示结果条数
          pageIndex: 1, // 页码
          radius: 500, //范围，默认：500
          citylimit: true, //是否强制限制在设置的城市内搜索
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        console.log(that.obj);
        var cpoint = that.obj; //中心点坐标
        placeSearch.searchNearBy("", cpoint, 2000, (status, result) => {
          this.hospital = result.poiList.pois;
          console.log(this.hospital);
          let marker = [];
          this.hospital.forEach((item, index) => {
            marker.push({
              position: [item.location.lng, item.location.lat],
              address: item.address,
              id: item.id,
              name: item.name,
              image:
                item.type.indexOf("政府机构及社会团体") >= 0 ||
                item.type.indexOf("公安警察") >= 0 ||
                item.type.indexOf("警察") >= 0
                  ? require("../assets/img/police.png")
                  : require("../assets/img/hospital.png"),
              events: {
                click(e) {
                  that.wind.forEach(window => {
                    that.visibles = false; //关闭窗体
                  });
                  that.aabb = that.wind[index];
                  that.$nextTick(() => {
                    that.visibles = true; //点击点坐标，出现信息窗体
                  });
                }
              }
            });
            that.wind.push({
              position: [item.location.lng, item.location.lat],
              content: `<div>地址"${item.address}</div>
            <div>名称:${item.name}</div>
             <div>手机号:${item.tel ? item.tel : ""}</div>
          
            `, //内容
              offset: [5, -15] //窗体偏移
            });
          });
          this.peripherals = marker;
        });
      });
    }
  },

  mounted() {
    this.point();
  }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
html body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.amap-wrapper {
  width: 100%;
  height: 700px;
}
/deep/ .amap-icon img {
  width: 20px;
  height: 20px;
}
</style>

最后

以上就是寂寞超短裙为你收集整理的vue-amap高德地图的全部内容，希望文章能够帮你解决vue-amap高德地图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。