2 - 在vue项目中使用腾讯地图

绿野小雪
2,406 阅读1分钟

码云地址：gitee.com/mayxue/vue2… 效果： image.png

一、文档

  1. 腾讯API地图链接：lbs.qq.com/webApi/java…
  2. 腾讯地图实例链接：lbs.qq.com/webDemoCent…

二、配置

2.1 加载腾讯地图API

在public -> index.html中引入

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <noscript>
      <strong>We're sorry but
        <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable
        it to continue.</strong>
    </noscript>
    <script charset="utf-8"
            src="https://map.qq.com/api/js?v=2.exp&key=5PLBZ-KIZC6-NCKSH-MOPXS-QP6OK-M4BIO">
    </script>

    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

</html>

2.2 安装、引入js跨域请求插件

2.2.1 安装vue-jsonp依赖

npm install vue-jsonp --save

2.2.2 在main.js全局引入vue-jsonp

import Vue from 'vue';
// js跨域请求插件
import { VueJsonp } from 'vue-jsonp';
Vue.use(VueJsonp);

三、在页面使用腾讯地图

3.1 组件：src->components->TxMap->index.vue

<template>
  <!-- 腾讯地图 -->
  <section>
    <div id="container"></div>
    <span class="text-warning">&nbsp;可拖动放大</span>
  </section>
</template>

<script>
export default {
  name: "Tx-Map",
  props: {},
  comments: {},
  data() {
    return {};
  },
  watch: {},
  methods: {
    init(zoom = 8, lat = 39.911265, lng = 116.375212, storeAddress) {
      console.log("地图初始化-纬度--lat", lat);
      console.log("地图初始化-经度--lng", lng);
      let that = this;
      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点23.140873000522223, 113.34551811218262
      var myLatlng = new qq.maps.LatLng(lat, lng);
      //定义工厂模式函数
      var myOptions = {
        zoom, //设置地图缩放级别
        center: myLatlng, //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP, //设置地图样式详情参见MapType
      };
      //获取dom元素添加地图信息
      var map = new qq.maps.Map(
        document.getElementById("container"),
        myOptions
      );

      var marker;
      if (storeAddress) {
        if (!marker) {
          marker = new qq.maps.Marker({
            position: myLatlng,
            draggable: true,
            map: map,
          });
        }
      }
      // 添加地图点击事件
      qq.maps.event.addListener(map, "click", function (event) {
        // event.latLng.getLat() -- 纬度
        // event.latLng.getLng() -- 经度
        let map_key = "5PLBZ-KIZC6-NCKSH-MOPXS-QP6OK-M4BIO";
        that
          .$jsonp(
            `https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&key=${map_key}&location=${event.latLng.getLat()},${event.latLng.getLng()}`
          )
          .then((res) => {
            that.$emit("setAddress", res.result);
            myLatlng = new qq.maps.LatLng(
              res.result.location.lat,
              res.result.location.lng
            );
            marker.setMap(null); //清除地图的所有marker标点
            marker = new qq.maps.Marker({
              position: myLatlng,
              draggable: true,
              map: map,
            });
          })
          .catch((err) => {});
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  min-height: 500px;
  display: inline-block;
  // 容器可拖放
  resize: both;
  overflow: auto;
}
</style>

3.2 在页面中使用腾讯地图：txMap.vue

<template>
  <!-- 在vue项目中使用腾讯地图 -->
  <div>
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="180px"
      class="form"
      size="small"
    >
      <el-form-item label="门店地址：">
        <el-input
          style="width: 400px"
          v-model="form.store_address"
          placeholder="请输入门店详细地址"
          clearable
          @input="addressChange(15)"
        ></el-input>
        <el-button
          type="primary"
          plain
          clearable
          @click="addressChange(15)"
          >搜索地址</el-button
        ></el-form-item
      >
      <el-form-item label="门店定位">
        <tx-map ref="map" @setAddress="setAddress" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import TxMap from "@/components/TxMap"; //腾讯地图
export default {
  components: { TxMap },
  data() {
    return {
      form: {
        store_address: "广东省广州市天河区信源大厦",
        prov_name: "",
        city_name: "",
        district_name: "",
        latitude: "",
        longitude: "",
      },
    };
  },
  methods: {
    //更新地点
    setAddress(newAddress) {
      this.form.store_address =
        newAddress.formatted_addresses.recommend; //地址
      this.form.latitude = newAddress.location.lat; //纬度
      this.form.longitude = newAddress.location.lng; //经度
      this.form.prov_name = newAddress.address_component.province; //省
      this.form.city_name = newAddress.address_component.city; //市
      this.form.district_name = newAddress.address_component.district; //区
      this.form = Object.assign({}, this.form, {
        store_address: newAddress.formatted_addresses.recommend,
      });
      console.log("this.form.store_address", this.form.store_address);
    },

    // 地址搜索事件
    addressChange(zoom = 15) {
      let map_key = "5PLBZ-KIZC6-NCKSH-MOPXS-QP6OK-M4BIO"; //腾讯地图key
      //省市区
      let prov_name = this.form.prov_name || "",
        city_name = this.form.city_name || "",
        district_name = this.form.district_name || "";
      //如果有省市区的选择，地图搜索就要把省市区组装起来，传入到address参数里
      let store_city = prov_name + city_name + district_name;

      // 地址转坐标
      this.$jsonp(
        `https://apis.map.qq.com/ws/geocoder/v1/?output=jsonp&key=${map_key}&address=${store_city}${this.form.store_address}`
      ).then((res) => {
        // 根据点击地点获取经纬度
        let lat = res.result.location.lat; //纬度
        let lng = res.result.location.lng; //经度
        //在地图上定位地点
        this.$refs["map"].init(
          zoom,
          lat,
          lng,
          this.form.store_address
        );
      });
    },
  },
  created() {
    this.addressChange(15);
  },
};
</script>

<style lang="scss" scoped></style>
avatar
文章
阅读
粉丝