使用marker的一些内容

因为最近在搞uni-app的地图项目，所以大量使用了uni-app中的地图组件

虽然uni-app还是一个小学生水平，但是自己也想了很多

本期就来谈一谈uni-app中的marker，里面的好的内容和一些小坑和大家share一下：

首先，老样子，上手册链接 https://uniapp.dcloud.io/component/map.html#app%E5%B9%B3%E5%8F%B0%E5%9C%B0%E5%9B%BE%E6%9C%8D%E5%8A%A1%E5%95%86%E5%B7%AE%E5%BC%82

对于手册来说marker的内容就是使用marker数组的使用方法，以及相对来说的一些属性

手册上给的例子是一个数组的情况：

export default {
	data() {
		return {
      id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [{
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '../../../static/location.png'
			}, {
				latitude: 39.90,
				longitude: 116.39,
				iconPath: '../../../static/location.png'
			}]
		}
	},
	methods: {

	}
}
当然，实际使用中并不可能都是，我们只在数组中使用一个数值
因为数组中的一个数值，对应到地图上就是一个标记点，也就是我们所说的
一个marker
因此，就是数组的拓展内容啦~
也就是这样：

{
id: 1,
width: 40,
height: 40,
latitude: 26
longitude: 117
iconPath: '/static/signPoint.png',
"callout": {
"content": "上饶",
"fontSize": 14,
"borderRadius": 5,
"display": "ALWAYS",
"padding": 7,
"bgColor": "#ffffff"
}
}, {
id: 2, //唯一的ID值，每个mark都不一样
width: 40,   //宽度
height: 40,  //长度
latitude: 26 //中心精度之一
longitude: 118  //中心精度之一
iconPath: '/static/signPoint.png',  //对应的地图上标点的样式
"callout": {   //气泡
"content": "天山",   //callout上面的显示内容
"fontSize": 14,  //callout上面内容字体
"borderRadius": 5, //callout边缘的圆滑程度（用我自己话来讲）
"display": "ALWAYS", //callout总是显示
"padding": 7, //边距
"bgColor": "#ffffff" //背景颜色，这个和tabbar好像是一样的，不是所有的颜色都支持
}
},

 

基本的数组结构，就和C++的一样

后面的callout就是marker中的一些属性,用处标记在代码上了

callout中的一些属性，里面的内容也注释到代码上了

然后就是本章想说的内容，markerTap  //marker点击事件，也就是点击marker，我们的标记的事件

markerTap默认是显示在console上面的，

但是，我们为了点击不同的marker，获得不同的输出

就有了下面的代码：

markerTap(e) {
console.log(e)
var clickmarkerId = e.detail.markerId
//根据e.mp.detail.markerId跟撒点的id进行判断，如果相等就进行赋值
for (var i = 0; i < this.markers.length; i++) {
if (this.markers[i].id == clickmarkerId) {
if (clickmarkerId == 0) {
console.log("成功点击0")
}
if (clickmarkerId == 1) {
console.log("成功点击1")
}
console.log(this.markers[i].id)
}
}
},

 

也就是方法中定义markerTap方法，markerTap方法是默认回调一个e参数的，使用遍历，再对比，就可以很好的把点击不同的marker进行不同的操作写出来了

因为这里是测试内容，所以写了console的输出内容

 

————————————————————————————————————————————————————————————————————————————————————————————

对于marker的东西就分享到这里，欢迎大家评论区留下想问的内容

我们可以一起学习解决~

QAQ