uni-app 地图全解析+事件监听
<h3>最近找到了一篇uni-app的地图解决方案精品文章，这里分享给大家，希望对大家有所帮助</h3><h3>转载地址：https://blog.csdn.net/cplvfx/article/details/111447466</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">前置条件：你需要阅读
https://uniapp.dcloud.io/component/map</pre>
</div>
<h3>先看图</h3>
<p><img src="https://img-blog.csdnimg.cn/20201220172500337.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NwbHZmeA==,size_16,color_FFFFFF,t_70" alt=""></p>
<p> </p>
<h3>事件监听-属性说明</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">这个表也是官方的
标红的是我用到的</pre>
</div>
<p><img src="https://img2020.cnblogs.com/blog/2149129/202111/2149129-20211120092005389-192716746.png" alt="" loading="lazy"></p>
<h3>使用</h3>
<h3>html</h3>
<h3>我这里用了“@markertap”点击标记点时触发事件， “@tap”点击地图时触发事件。</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><template>
<view class="content">
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<view class="page-body">
<view class="page-section page-section-gap map" style="width: 100%; height: 900rpx;">
<map style="width: 100%; height: 100%;" scale='15' :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markertap" @tap="tap" @updated="updated">
</map>
</view>
</view>
</view>
</template></pre>
</div>
<h3>js</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"> <script>
export default {
data() {
return {
title: '百度地图',
latitude: 34.7586,
longitude: 113.672307,
covers: [] //标记点地图数据
}
},
onLoad() {
this.init();
},
methods: {
init() {
let that = this;
console.log("init()")
//发起网络请求获取数据
//用uni.request(OBJECT)方法
//我这里模拟下数据
var data = [{
id: 1,
name: '雷军',
imgUrl:'../../static/user.png',
lat: "34.7586",
lng: "113.672307"
},{
id: 2,
name: '李彦宏',
imgUrl:'../../static/user.png',
lat: "34.763466",
lng: "113.686285"
},{
id: 3,
name: '马化腾',
imgUrl:'../../static/user.png',
lat: "34.763412",
lng: "113.680185"
}, ];
that.MapData(that,data)
},
//地图数据初始化
MapData(that, data) {
console.log(data.length)
console.log(data)
let arrayData = [];
for (var i = 0; i < data.length; i++) {
arrayData.push({
id: data.id, //marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。
latitude: data.lat, //纬度
longitude: data.lng, //经度
title: data.name, //点击时显示，callout存在时将被忽略
iconPath:data.imgUrl, //项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对小程序根目录；也支持临时路径
width: 60,
height: 60,
callout: {
//自定义标记点上方的气泡窗口
content: data.name,
color: '', //文本颜色
fontSize: 16, //文字大小
borderRadius: 20, //callout边框圆角
bgColor: '', //背景色
padding: 6, //文本边缘留白
display: 'BYCLICK', //'BYCLICK':点击显示; 'ALWAYS':常显
textAlign: 'left', //文本对齐方式。有效值: left, right, center
},
label: {
//为标记点旁边增加标签
content: '', //标记点旁边的文字
color: '#ff6600', //文本颜色
fontSize: 16, //文字大小
x: 0, //label的坐标，原点是 marker 对应的经纬度
y: 0, //label的坐标，原点是 marker 对应的经纬度
borderWidth: 1, //边框宽度
borderColor: '', //边框颜色
borderRadius: 10, //边框圆角
bgColor: 'red',
padding: 6, // 文本边缘留白
textAlign: 'left', //文本对齐方式。有效值: left, right, center
},
anchor: {
//经纬度在标注图标的锚点，默认底边中点 {x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
x: .5,
y: 1
}
});
}
console.log(arrayData.length)
console.log(arrayData)
//重新给地图数据赋值covers
that.covers = arrayData;
},
//地图点击事件
markertap(e) {
console.log("===你点击了标记点===")
console.log("你点击的标记点ID是:" + e.detail.markerId)
//console.log(e)
},
//点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度
tap(e){
console.log("===你点击了地图点===")
console.log(e)
},
//在地图渲染更新完成时触发
updated(e){
console.log("===在地图渲染更新完成时触发===")
console.log(e)
}
}
}
</script></pre>
</div>
<h2>说明：</h2>
<h3>其中标记点图片为什么是圆形的在你的项目跟目录找到App.vue,放入下面代码</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><style>
/*每个页面公共css */
img.csssprite {
border-radius: 50px !important;
border: 1px #c7c7c7 solid !important;
}
</style></pre>
</div>
<h2 id="tid-NKjXJW">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h2>
<p> <img src="https://img2020.cnblogs.com/blog/2149129/202107/2149129-20210719144042684-15122820.jpg" width="435" height="428"></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/15580150.html
頁:
[1]