vue实现腾讯地图组件

在index.html页面引入以下代码

  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=GOZBZ-MWHKV-GDSPP-UPRNN-YUWEE-EHB5U">script>
  <script type="text/javascript" src="http://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js">script>
  <script src="http://pv.sohu.com/cityjson?ie=utf-8">script>

自定义TXMap地图组件

<template>
  <a-modal :title="title" :visible="showModel" :width="width" @cancel="onClose" @ok="ok">
    <p>p>
    <div :key="mapKey" :id="'container_' + mapKey" :style="'width:' + (width - 80) + 'px;height:500px;'">div>
    <p>经度:{
    {longitude}} 纬度:{
    {latitude}} 地址:{
    {address}}p>
    <a-button type="primary" @click="buttonPosition" icon="environment" :loading="loading">定位a-button>
    <a-input-search style="width: 300px" placeholder="地址搜索" v-model="searchAdress" enter-button @search="onSearch" />
    <a-list style="height: 200px;overflow: scroll">
      <a-list-item @click="selectAddr(addr)" :key="idx" v-for="(addr, idx) in narAddress"><h3>{
    {addr.name}} <a-tag>{
    {addr.category}}a-tag>h3>
        <br><h7>地址:{
    {addr.address}}h7>a-list-item>
    a-list>
  a-modal>
template>

<script>
export default {
      
  props: {
      
    show: {
      
      default: false
    },
    width: {
      
      default: 680
    },
    title: {
      
      default: ''
    }
  },
  name: 'TXMap',
  computed: {
      
    showModel: {
      
      get: function () {
      
        this.setMap()
        return this.show
      },
      set: function () {
      
      }
    }
  },
  data () {
      
    return {
      
      mapKey: new Date().getTime(),
      /** loading **/
      loading: false,
      /** 地址 **/
      searchAdress: '百花山路',
      detailcontent: '这是我当前的位置',
      address: '',

      longitude: 106.72622323036194, // 经度
      latitude: 26.86139511254856, // 纬度
      city: '',
      /** 定位 **/
      geolocation: null,

      myLatlng: null,
      map: null,
      geo: null,

      markerSelect: null,
      labelMarkerSelect: null,
      narAddress: [],
      zoom: 13
    }
  },
  watch: {
      
  },
  methods: {
      

    /** **/
    onClose () {
      
      this.$emit('close')
    },
    initMap (location = null) {
      
      // let _this = this
      if (!location) {
      
        this.getPosition()
        // setTimeout(function () {
      
        //   _this.setMap()
        // }, 3000)
      } else {
      
        this.longitude = location.lng
        this.latitude = location.lat
        this.setMap()
        // setTimeout(function () {
      
        //   _this.setMap()
        // }, 3000)
      }
    },

    /** ***/
    ok () {
      
      let location = {
      
        lat: this.latitude,
        lng: this.longitude
      }
      this.$emit('position', location)
      this.$emit('close')
    },

    /** 进行地址搜索 **/
    onSearch () {
      
      let _this = this
      // returnCitySN["cip"]+','+returnCitySN["cname"] returnCitySN['cname'] 在index.html 引入了
                    
                    

你可能感兴趣的:(vue.js,前端,腾讯地图,vue,js,定位)