在Google Flash API for map的当前版本(1.9)中,是不支持同时使用自定义label和自定义icon的,但是项目中又必须同时使用这两个东西,为什么google earth和google earth plugin中可以显示呢?苦思多日不得解,今天突发奇想,如果api不提供,就用一个山寨点的方法呗。
具体问题是这样的:
google中无法同时显示自定义icon和label,如果非得这么做,就要用自定义的sprite,但是产生的问题是,这个自定义的sprite会产生较大的偏移,在普通的应用中可能还看不出来,但是在我们的项目中,由于该点是显示在道路上的,因此产生的偏移会非常明显,而使用自定义icon,则不会有偏移。
解决方案:
画两个点(marker),第一个点使用自定义icon,因此图标会非常正确的现实在道路上;第二个点则用来显示自定义label,就是找一个只有一个像素的图片,和文字同时画在map上,由于一个像素的点在地图上是不可见的,所以就只剩下文字信息在地图显示了;另外,这个点是不能够和第一个点重合,所以还要在第一个点的坐标的基础上加一些偏移,我使用的偏移是0.00000000000001,这个偏移量在map上刚刚偏移一点点,所以感觉上第二个点的文字刚好是第一个点的注释,整体看起来是一致的。
技术不是万能的,在思考时往往要摆脱具体的技术方法来想怎么解决问题。简单说,解决问题是最重要的,在用一种方法解决不了时,千万不要钻牛角尖,或许可以从另一个方向入手,尽管可能不太符合常规,‘山寨’气息浓重,但是,只要能解决问题就ok了
最近公司爱尔兰项目需要使用
google
地图,项目还是用vue写的,那我就寻思找个vue能用的
google
地图的插件吧,找了vue2-
google
-
map
s,这个插件确实还行,而且github上还有api文档,虽然都是英文很难受,但是还行,没有骚需求的话,用它还行。
google
地图里面有个功能,
label
,vue2-
google
-
map
s里面是没有办法控制
label
的位置的,默...
代码: <script src="http://ditu.
google
.com/
map
s?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
谷歌地图 new A
Map
.Marker 创建标记点 缩放后 位置偏移
解决方案
按照高德地图的api,创建Marker(图标)并将其放置到地图上,代码如下:
var marker = new A
Map
.Marker({
//设置经纬度
position : [121.499809,31.239666],
//设置偏移量
offset: new A
Map
.Pixel(-10, -10),
//设置图标属性
icon
:
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
- http://
map
s.
google
.com/
map
files/marker.png
- http://
map
s.
google
.com/
map
files/marker_black.png
- http://
map
s.
google
.com/
map
files/marker_grey.png
- http://
map
s.
google
.com/
map
files/marker_orange.
- http://www.
google
.com/
map
files/center.png
- http://www.
google
.com/
map
files/east.png
- http://www.
google
.com/
map
files/west.png
http://w
http://blog.sina.com.cn/s/blog_55b765670100i4i0.html
http://blog.sina.com.cn/s/blog_55b765670100i4i3.html
http://blog.sina.com.cn/s/blog_55b765670100i4i6.html
http://blog.sina.com.cn/s/blog_55b7656...