高德地图自定义标注AnnotationView，滑动防止数据混乱

<link rel="stylesheet" href="http://yandex.st/highlightjs/6.2/styles/googlecode.min.css">

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script src="http://yandex.st/highlightjs/6.2/highlight.min.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

<script type="text/javascript">

$(document).ready(function(){

$("h2,h3,h4,h5,h6").each(function(i,item){

var tag = $(item).get(0).localName;

$(item).attr("id","wow"+i);

$("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');

$(".newh2").css("margin-left",0);

$(".newh3").css("margin-left",20);

$(".newh4").css("margin-left",40);

$(".newh5").css("margin-left",60);

$(".newh6").css("margin-left",80);

});

});

</script>

<div id="category"></div>

槽点满满

不知各位使用过地图的同僚们有没有遇到过一个很奇怪的问题：自定义地图标注AnnotationView时候，完全按着高德地图的Demo写代码，当每个AnnotationView模型数据不同时候，快速滑动地图使得AnnotationView在地图可视区域范围 内、外来回切换时，会出现数据混乱。这个问题是我很久很久之前发现的，当时我是通过禁用重用机制来解决的，即是每次AnnotationView出现时都要alloc，不会从缓存池获取。前两天我重新研究了一下，也是各种百度都没有找到相应的好的解决方法，无奈硬着头皮上咯😄

现象满满

- (MAAnnotationView *)mapView:(MAMapView *)mapView viewForAnnotation:(id<MAAnnotation>)annotation 这个回调函数自我感觉和UITableView的重用还不太一样<也有可能本人水平有限，当我没说😏>，UITableView的回调有个IndexPath能够在这个毒地方把数据源和Cell 绑定上，现在图片是有的，但是一滑动数据全乱了，如图<1>，下图是我使劲滑动了很多次之后的效果，可以明显看到小的AnnotationView边沿很黑很黑的，而且旁边还出现了一个不该有的空白的大的AnnotationView，最右侧大的AnnotationView也是一样，看图层可以发现重叠了很多AnnotationView

图<1>

解决方法

由于自定义的每个AnnotationView的数据都不一样，包括背景图片，而每个AnnotationView都有一个关联的Annotation，所以应该从这儿入手，滑动地图每次AnnotationView出现在可视区域内的时候，都会执行图<2>中的 117行 代码，把对应的数据赋值给对应的AnnotationView，在自定义的AnnotationView类中，一定要重写- (void)setAnnotation:(id<MAAnnotation>)annotation;。具体怎么实现的，我 Demo 中都注释好了，需要的话去点击 Demo 传送门 去我 Github上下载吧🙂。

图<2>

解决之后的效果图如图<3>，无论怎么滑动都不会出现了。

图<3>

---

PS：千里之外，始于足下，万分喜爱源自点赞、评论+喜欢😄