百度地图获得经纬度

使用百度地图的API获得当前城市的经纬度

最近在工作中突然有一个定位的功能，想了很久在网上搜了很多资料，后台告诉我他只需要当前城市的经纬度就可以，下面是我做的一些操作

首先创建一个单独的组件Map.vue

里面就是一些需要的参数，下面直接上代码

var map = new BMap.Map("allmap")
      var point = new BMap.Point(116.331398, 39.897445)
      map.centerAndZoom(point, 12)
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point)
          map.addOverlay(mk)
          map.panTo(r.point)
          console.log(r.point.lng + ',' + r.point.lat)
        }
        else {
          alert('failed' + this.getStatus())
        }
      }, { enableHighAccuracy: true })

但是这样会有一个问题，会报错
Uncaught TypeError: Cannot read property ‘gc’ of undefined
一直很好奇这个问题去页面搜索无果，后来强大的度娘说页面少一个标签

<div id="allmap"></div>

这样不进行报错，不过后台要的经纬度在当前页面可以获得，在其他页面怎么使用呢，
这就用到了父子之间的数据传递的方式，我想在另一个组建中引用Map.vue文件，用到了子传父的方法。
子传父方法的原理：先在父元素中定义一个方法，通过自定义的方法传递给子组件，子组件通过this.$emit()就可以把数据传递过去，下面是个小demo

<div  id="app">
	<child @fna = "fn"></child>
</div>
<script>
	Vue.component( 'child'，{
	template:
	`
		<h1>子组件：</h1>
	`,
	data( ){
		return {
			cmsg：'子组件的数据'
		}
	}，
	created( ){
		this.$emit( 'fna',this.cmsg )
	}
} )
const vm = new Vue({
	el:'#app',
	methods:{
		fn( res ){
	console.log( `fn:被调用了 => ${ res }` )
		}
	}
})
</script>

除了父子之间的通讯机制还有向父组件引入另一个组件，比如，我想在index页面使用Map.vue 首先要在index页面import引入

import Map from '../../api/Map.vue'

然后再页面注册一下

 components: {
    Map
  },

最重要的是页面中别忘了写入标签，方便自定义事件

<Map @fna="fn"></Map>

最后可以进行父子之间的数据的传递
在index（你想要用到数据）页面进行自定义事件的注册

 fn (res) {
        this.lng = res.lng
        // this.lng = this.lng.split('.')[0]
        this.lat = res.lat
        // this.lat = this.lat.split('.')[0]
        // console.log(this.lng, this.lat)
      },

这里的lng和lat需提前在data中注册
下面是Map.vue的完整代码

<template>
  <!--  -->
  <div>
    <div id="allmap">
    </div>
  </div>
</template>

<script type="text/javascript">
/* eslint-disable */
export default {
  data () {
    return {
      obj: ''
    }
  },
  created () {

  },
  mounted () {
    this.go()

  },
  methods: {
    go () {
      var map = new BMap.Map("allmap")
      var point = new BMap.Point(116.331398, 39.897445)
      map.centerAndZoom(point, 12)
      var geolocation = new BMap.Geolocation()
      let _this = this
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point)
          map.addOverlay(mk)
          map.panTo(r.point)
          // console.log(r.point.lng + ',' + r.point.lat)
          const obj = {
            lng: r.point.lng,
            lat: r.point.lat
          }
          // this.obj = r.point.lng + ',' + r.point.lat
          _this.$emit('fna', obj)
          //return obj
        }
        else {
          alert('failed' + this.getStatus())
        }
      }, { enableHighAccuracy: true })
    }
  }
}
</script>
<style>
</style>

通过this.$emit将Map.vue中的数据传递给index页面