使用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

巴特西

使用marker的一些内容

最新文章

热门文章