GIS（三）——优化js版搜狗地图的brand标牌样式

       从上一篇博文的效果图中，我们看到有几个相近的brand标牌给相互遮挡住了，不能完整的显示。怎么处理一下呢？今天我们就来研究一下这个解决方式。

       事实上要想不被遮挡，能够让这几个brand位置变动一下，而不总是箭头向下指向景点。假设改变箭头的指向呢？首先我们要了解它原本是怎么处理的。

这个肯定是从spirit入手了。

       先说一下spirit的參数：

{
    url:"http://api.go2map.com/maps/images/v2.5/2.png",
    imgSize:[140,77],
    //[[左側],[中间],[右側],[尖脚]]
    //[clipLeft,clipTop,width,heigth]
    clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[0,53,33,23]],
    //[尖脚绑定坐标的位置]
    anchor:[16,23],
    //尖脚微调偏移
    footOffset:[0,-3]
}

       这里是官网的描写叙述。url是图片的url地址，能够是本地图片。imgSize是图片的像素大小。clips是原图剪切的位置。假设看不懂继续往下看。anchor是锚点，就是在地图中的尖脚相应的坐标 ，參数也是在图片中的偏移量。footOffset是整个尖脚在地图中显示的位置。

       因为这个brand能够自适应宽度，我以为它是以多张图片完毕的这个功能。可是看到打开这个url相应的图片（上图），才发现原来仅仅是一张图片。

而自适应宽度则是clips设置的功劳了。

clips就是从这张图片上切不同的位置作为图片进行显示。clips分为4块，左側、中间、右側能够完毕自适应宽度。而尖脚则是箭头在图片中的位置。每个切出来的图片都是从左上角的坐标+宽高切出来的。为什么不设定多设定几张图片呢？这是为了降低下载小图标的次数。

       最终明确了这个brand箭头的处理了。我们要想改变箭头的指向。必须得改动图片了。

假设你学做ps，这个工作就简单多了。

以下是我改动的图片：

       就是多整几个箭头就可以。假设想让箭头向右的话，就在切尖角的參数中，切向右箭头的位置，然后anchor也要设定。把箭头偏移到景点的位置。footOffset则须要调整到整个图片的右側。非常easy，自己试着调整一下就明确了。

       还回到咱们原先的话题。

如今有多个景点，可能须要指向不同的方向，所以咱们就不能设定死了，那么就须要设定4个function，来得到4中方向的spirit。

依据详细情况来选择不同的brand指向。

       以下是我调整好的function:

  //箭头向上
  function get_up_spirit(){
    var spirit={
        url:"22.png",
        imgSize:[140,87],
        clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[105,53,33,13]],
        anchor:[17,0],
        footOffset:[0,-63]
             
    }
    return spirit;
  }
  
  //箭头向下
  function get_down_spirit(){
    var spirit={
        url:"22.png",
        imgSize:[140,87],
        clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[0,53,33,23]],
        anchor:[16,23],
        footO