`

Google map中自定义label和icon的解决方案

    博客分类:
  • Flex
阅读更多

  在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了

分享到:
评论
2 楼 jie66989 2012-11-24  
学习了,就说怎么不显示自定义的图片
1 楼 bonbonfat-Zoe 2011-10-12  
原来是因为不可以同时自定义icon和label 郁闷了我好久~
谢谢lz!顶你关于条条大路通罗马的论调~

相关推荐

    Google自定义Label的js

    在Googlemap中自定义label 的插件

    【java】mapstruct自定义类的转换示例(csdn)————程序.pdf

    本示例主要介绍如何在MapStruct中自定义类转换,以便处理特定的转换需求。我们将通过分析标题、描述以及提供的代码片段来深入理解这一过程。 首先,MapStruct通过注解驱动的方式,自动为对象间的转换生成源码,极大...

    GoogleMap添加自定义标记-图片

    在使用Google Map API进行开发时,为地图添加自定义标记是一项常见的需求,这可以使地图更加生动且具有个性化。本文将详细介绍如何在Google Map上添加使用图片作为标记的方法,以实现自定义的效果。 首先,理解...

    google map api 实现自定义mark和其移动

    google map api 实现自定义mark和其移动

    谷歌地图Google Map API V3中文开发文档

    在谷歌地图 Google Map API V3 中,开发者可以使用 Map 对象来创建一个新的地图,该对象提供了多种方法和属性,以便开发者可以自定义地图的样式和行为。例如,开发者可以使用 setCenter() 方法来设置地图的中心点,...

    echarts map自定义图片.zip

    "echarts map自定义图片.zip"这个压缩包文件正是提供了这样的解决方案。下面将详细阐述如何在ECharts中自定义地图并使用图片。 首先,ECharts是一个由百度开发的开源JavaScript数据可视化库,它提供了一系列丰富的...

    react使用高德地图react-amap:Markers、Circle、ContextMenu、自定义ContextMenu

    在`react-amap`中,我们可以创建一个Marker组件,通过`position`属性指定标记点的经纬度坐标,`icon`属性可以设置标记点的图标,同时还可以添加点击事件监听器以实现交互功能。 4. **Circle**: Circle组件用于在...

    Android google map自定义图层

    `CustomItemizedOverlay`是Google Maps API中的一个重要类,它用于创建可自定义的覆盖物(Overlay)。覆盖物是地图上的可视化元素,可以是图标、标记或者更复杂的图形。`CustomItemizedOverlay`使得开发者能够添加带...

    map MKPinAnnotationView自定义(地点标记自定义)

    苹果提供了强大的MapKit框架,使得开发者可以轻松地在应用中集成地图,并对地图上的元素进行自定义。本篇将深入讲解如何利用MapKit中的`MKPinAnnotationView`进行地点标记的自定义,以满足个性化的需求。 `...

    GoogleMap谷歌地图demo

    总结来说,这个"GoogleMap谷歌地图demo"是一个利用GoogleMap API实现的综合地图应用实例,可能包含了地图显示、定位、路线规划、自定义样式等多种功能。开发者可以通过学习和分析这个demo,掌握如何在自己的项目中...

    谷歌地图GoogleMap

    Google Map API(Application Programming Interface)则是谷歌为开发者提供的接口,允许他们将谷歌地图的功能集成到自己的网站或应用中,提供丰富的地图定制和交互能力。 一、Google Map API基础 Google Map API...

    vue2googlemap基于Vue2x和google地图组件

    Vue2googlemap适用于Vue 2.x版本,如果你正在使用Vue 3.x,可能需要寻找其他的解决方案,因为此插件尚未更新到Vue 3的兼容版本。 9. **注意事项** - 记得在Google Maps Platform中启用相应的API服务,并获取API...

    Google Map API 使用示例

    Google Map API 是一款强大的工具...通过学习和实践这些示例,你可以熟练掌握 Google Map API 的基础和高级功能,从而在各种项目中灵活应用。记住,始终要关注 API 的使用限制和最佳实践,以确保服务的稳定性和高效性。

    Echarts-Map-Icon:Echarts Map地图,自定义标图(图片),自动循环显示,ECharts如何自定义省、市、县区地图(各省市直辖区的map地图),ECharts如何在地图上自定义图片、图标,根据经纬度显示自定义建筑图片、添加自定义覆盖物, 欢迎小伙伴们参与进来,一起完善

    Echarts-Map-Icon 基于Echarts.js 的 Map地图,在上面添加自定义标图(图片),并自动循环提示相关信息! Echarts Map地图,自定义标图(图片),自动循环显示,ECharts如何自定义省、市、县区地图(各省市直辖区的...

    google map应用实例

    本应用实例将探讨如何利用Google Map API在离线环境中实现地图服务,这对于那些网络不稳定或者需要在无网络环境下使用的场景尤其有价值。 一、Google Map API简介 Google Map API是Google提供的一套接口,允许...

    完美解决百度地图聚合中的marker添加label后移动、放大缩小时label消失的问题

    首先,我们需要了解百度地图API中的marker和label。Marker是地图上表示地理位置的图标,而label则是附加在marker上的文本,用于显示更具体的信息。在聚合过程中,marker会被合并成一个大的图标,但label的处理则需要...

    GoogleMap控件下载

    综上所述,GoogleMap控件通过其开源特性和强大的API,为开发者提供了强大而灵活的地图集成方案。无论是简单的地图展示还是复杂的地图应用,都可以借助此控件轻松实现。开发者只需了解其基本原理和接口,就能在自己的...

    googleMap根据经纬度获取地理位置

    首先,`googleMap根据经纬度获取地理位置`这个标题涉及到的核心技术是Google Maps Geocoding服务。Geocoding是将地址或坐标(经纬度)转换为地理坐标的过程,反之亦然。在Google Maps API中,我们可以使用Geocoding ...

    Ext Google Map 简易开发框架

    在Ext Google Map框架中,ExtJs负责创建交互式的地图界面和管理用户界面元素。 其次,**Google Maps API**是谷歌提供的一套JavaScript接口,允许开发者在网页上嵌入地图,执行各种地图操作,如定位、导航、标记、...

    谷歌MAP_V3中文详解以及一个简单例子

    在JavaScript代码中,`initMap`函数内,通过`new google.maps.Map()`创建地图对象。需要指定一个DOM元素(如`div`)作为地图容器,以及地图的初始配置,如中心位置、缩放级别等。 例如: ```javascript function ...

Global site tag (gtag.js) - Google Analytics