效果如图 , 左边是我指定的标点位置, 右边是我自己的定位位置
研究了一整天,终于搞出来了, 刚开始以为要用第三方插件,一直在试高德,腾讯这些, 都没搞好,结果发现根本不用第三方 。。。 很简单的
上代码。
直接复制粘贴,就是我上图的效果
1 , iconPath 是标注点图标 ,要改成自己目录下的图片 ,默认的图标很丑,我自己改了
2 , 自定义标记点 , 我这里是写死的经纬度,实际开发可以发请求用接口返回的经纬度
3 ,markers 就是标记点数组, id是唯一标识
4 , :scale 是地图的缩放比例,自己去调,看怎么样最好
<template>
<view>
<map
class="map"
:longitude="longitude"
:latitude="latitude"
:show-location="true"
:markers="markers"
:scale="16"
style="width: 100%; height: 450px;"
></map>
</view>
</template>
<script>
export default {
data() {
return {
// 用户当前定位信息
latitude:"",
longitude:"",
// 自定义标记点
markers: [{
id: 2,
latitude: '23.124088',
longitude: '113.369389',
iconPath:'../../static/phone.jpg',
width: 30,
height: 30,
}]
}
},
onLoad() {
this.init()
},
methods: {
// 初始化
init() {
let that = this
// 拿到用户所在位置信息
uni.getLocation({
type: 'gcj02',
success:(res)=> {
this.latitude=res.latitude,
this.longitude=res.longitude,
that.markers.push({
id:1,
latitude:this.latitude,
longitude:this.longitude,
iconPath:'../../static/location.jpg',
width: 30,
height: 30,
})
}
})
}
}
}
</script>
<style scoped>
map{
width: 100%;
height:600px
}
</style>