使用百度地图的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页面