码迷,mamicode.com
首页 > 其他好文 > 详细

vue里使用腾讯地图

时间:2019-12-24 18:56:06      阅读:1219      评论:0      收藏:0      [点我收藏+]

标签:init   highlight   20px   位置   enter   地址   app   安装   ini   

主要需求是:
1.通过搜索地址获取坐标经纬度,
2.通过点击地图上的位置获取地址同时获取坐标经纬度
使用了地址解析和反地址解析

npm安装腾讯地图
腾讯官方并没有在npm上发布腾讯地图插件,所以找到一个别人写的,可以直接调用腾讯地图javascript方法
链接:https://www.npmjs.com/package/qqmap

npm install qqmap --save

在组件中引入

import maps from "qqmap"

 

地图 DOM 元素
<div class="map">
       <el-input v-model="addressKeyword" placeholder="请输入地址来直接查找相关位置" clearable style="margin-bottom:20px">
            <el-button slot="append" icon="el-icon-search" @click="getAddressKeyword"></el-button>
        </el-input>
        <div id="container" style="width:100%; height:300px"></div>
  </div>
 

  

data:{
   //腾讯地图
      map: null,
      getAddress: null,
      getAddCode: null,
   addressKeyword: ""
}

 

由于在使用的把地图DOM放在了可显示隐藏的盒子里,导致了地图不显示的问题,(showModal是一个控制显示隐藏的变量;newValue是watch监听的新值)

故:

  watch: {
  showModal: function(newValue) { if (newValue) { this.init(); } } },

  初始化地图

 methods: {
    //初始化地图
    init() {
      var that = this;
      maps.init("W3YBZ-NW734-APUUL-XQTC4-76L2T-NCF70", () => {
        var myLatlng = new qq.maps.LatLng(22.547931568083015, 114.1306221485138);
        var myOptions = {
          zoom: 16,
          center: myLatlng,
          mapTypeId: qq.maps.MapTypeId.ROADMAP
        };
        that.map = new qq.maps.Map(
          document.getElementById("container"),
          myOptions
        );
        //获取点击后的地址
        qq.maps.event.addListener(that.map, "click", function(event) {
          // 获取点击后的地图坐标
          that.shopInfo.lng = event.latLng.getLng();
          that.shopInfo.lat = event.latLng.getLat();
          that.getAddressCode();
        });

        //调用地址显示地图位置并设置地址
        that.getAddress = new qq.maps.Geocoder({
          complete: function(result) {
            that.map.setCenter(result.detail.location);
            console.log(result.detail.location)
            that.shopInfo.lng = result.detail.location.lng;
            that.shopInfo.lat = result.detail.location.lat;
            var marker = new qq.maps.Marker({
              map: that.map,
              position: result.detail.location
            });
          }
        });
        //通过坐标来显示地图地址
        that.getAddCode = new qq.maps.Geocoder({
          complete: function(result) {
            that.addressKeyword = result.detail.address;
          }
        });
      });
    },

  

   //通过地址获得位置
    getAddressKeyword() {
      //通过getLocation();方法获取位置信息值
      this.getAddress.getLocation(this.addressKeyword);调用自带的接口
    },
    // 通过坐标获得地址
    getAddressCode() {
      var lat = parseFloat(this.shopInfo.lat);
      var lng = parseFloat(this.shopInfo.lng);
      var latLng = new qq.maps.LatLng(lat, lng);
      //调用获取位置方法
      this.getAddCode.getAddress(latLng);
    },
  

  

vue里使用腾讯地图

标签:init   highlight   20px   位置   enter   地址   app   安装   ini   

原文地址:https://www.cnblogs.com/Glant/p/12092866.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!