google搜了很久都没找到符合v3版本的google maps自定义图标,可以让图标使用自己的html,都是V2版本的,依靠重写google api属性来完成.

然后就找了个jquery下的google maps插件: GMAP3(http://gmap3.net)

经过研究发现...这货很方便,而且我也实现了自己的图标!

我的自定义图标使用的是bootstrap插件:font-awesome中的icon.

首先,引入

<link href="bootstrap.css" rel="stylesheet"/>

<link href="bootstrap-responsive.css" rel="stylesheet"/>

<link href="font-awesome.css" rel="stylesheet"/>

<script type="text/javascript" src="jquery.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?&sensor=false" type="text/javascript"></script>

<script type="text/javascript" src="gmap3.js"></script>

然后简历一个json

var $values = [

                      {

                          latLng: [48.8620722, 2.352047], data: "Paris !",

                          options: {

                              icon: "marker_icon_bg.png",

                              content: '<i style="color:#fff" class="icon-food"></i>',

                              offset: {

                                  y: -32,

                                  x: -6

                              }

                          }

                      },

                      {

                          address: "86000 Poitiers, France", data: "Poitiers : great city !",

                          options: {

                              icon: "marker_icon_bg.png",

                              content: '<i style="color:#fff" class="icon-picture"></i>',

                              offset: {

                                  y: -32,

                                  x: -8

                              }

                          }

                      },

                      {

                          address: "66000 Perpignan, France", data: "Perpignan ! <br> GO USAP !",

                          options: {

                              icon: "marker_icon_bg.png",

                              content: '<i style="color:#fff" class="icon-building"></i>',

                              offset: {

                                  y: -32,

                                  x: -6

                              }

                          }

                      }

        ];

直接调用gmap3的方法:

$(function () {

            $('#map_canvas').gmap3({

                map: {

                    options: {

                        center: [46.578498, 2.457275],

                        zoom: 5

                    }

                },

                marker: {

                    values: $values,

                    options: {

                        draggable: false

                    },

                    events: {

                        mouseover: function (marker, event, context) {

                            var map = $(this).gmap3("get"),

                              infowindow = $(this).gmap3({ get: { name: "infowindow" } });

                            if (infowindow) {

                                infowindow.open(map, marker);

                                infowindow.setContent(context.data);

                            } else {

                                $(this).gmap3({

                                    infowindow: {

                                        anchor: marker,

                                        options: { content: context.data }

                                    }

                                });

                            }

                        },

                        mouseout: function () {

                            var infowindow = $(this).gmap3({ get: { name: "infowindow" } });

                            if (infowindow) {

                                infowindow.close();

                            }

                        }

                    }

                },

                overlay: {

                    values: $values

                }

            });

        });

Body部分:

<body>

    <div id="map_canvas" style="width:100%; height:100%"></div>

</body>

相当方便!直接产生了地标背景上出现图标,而且还是json方式的,方便我们生成!

google maps v3 添加自定义图标(marker,overlay)的更多相关文章

  1. Google Maps V3 之 路线服务

    概述 您可以使用 DirectionsService 对象计算路线(使用各种交通方式).此对象与 Google Maps API 路线服务进行通信,该服务会接收路线请求并返回计算的结果.您可以自行处理 ...

  2. ［Google Maps API 3］Marker从Clusterer中分离及Marker置于Cluster上一层的解决办法

    在Google Maps API的使用中,经常用到Clusterer来避免过密的Marker显示.但仔细看一下Clusterer的设置参数中并没有直接将某些Marker除外的方法,那遇到这样的需求,怎 ...

  3. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  4. Google Maps API V3 之 图层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  5. Google Maps API V3 之 路线服务

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  6. ☀【移动】Google Maps JavaScript API v3

    Google Maps JavaScript API v3https://developers.google.com/maps/documentation/javascript/tutorial?hl ...

  7. google maps js v3 api教程(3) -- 创建infowindow

    原文地址 前面我们学习了地图和标记的创建.那么今天我们来学习怎样在地图上显示一个窗口(infowindow) infowindow构造函数为:InfoWindow(opts?:InfoWindowOp ...

  8. google maps js v3 api教程(2) -- 在地图上添加标记

    原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...

  9. [转]MBTiles 离线地图演示 - 基于 Google Maps JavaScript API v3 + SQLite

    MBTiles 是一种地图瓦片存储的数据规范,它使用SQLite数据库,可大大提高海量地图瓦片的读取速度,比通过瓦片文件方式的读取要快很多,适用于Android.IPhone等智能手机的离线地图存储. ...

随机推荐

  1. 20141013--判断语句（if ,else）

    目前为止,之前所学的程序只能一步步往下执行. 语句:判断,循环,形成程序分支和循环. 选择控制: if , else, switch, case 循环控制:white, do, for, foreac ...

  2. log4j定义某个类的日志级别

    项目引入了定时任务后,当我把已有的定时任务删除后,控制台一直会打出类似于 [org.springframework.scheduling.quartz.LocalDataSourceJobStore] ...

  3. C#使用反射工厂模式遇到System.TypeLoadException（类名错误导致）

    项目中,在运行另一个反射类时出现问题,未能从程序集中加载类 class PopUpActionFactory { public static InterfacePopUpAction getActio ...

  4. hadoop2-shell操作详解

  5. 6款好用的Python IDE

    “工欲善其事,必先利其器”,如果说编程是程序员的手艺,那么IDE就是程序员吃饭的家伙了.一个优秀的IDE,最重要的就是在普通文本编辑之外,提供针对特定语言的各种快捷编辑功能,让程序员尽可能快捷.舒适. ...

  6. ngx_cdecl

    ngx_cdecl 作为跨平台用,现在理解有限,以后补充 _cdecl 是C Declaration的缩写(declaration,声明),表示C语言默认的函数调用方法:所有参数从右到左依次入栈,这些 ...

  7. 为什么日历控件放在panel无法显示出来

    前言 以前一直没有做过c/s这块开发,最近一段时间,刚接触.当然winform自己肯定会,但是只是很早以前自己玩的时候弄弄.最近做的时候,很简单的一个效果,自己怎么也实现不出来,最后没事和一个哥们私下 ...

  8. 使用c#检测文件正在被那个进程占用

    要检测文件被那个进程占用,需要使用微软提供的工具Handle.exe,这里有微软提供的下载 我们可以在c#中调用Handle.exe 来检测到底哪个进程占用了文件 string fileName = ...

  9. ECshop sina

    http://blog.sina.com.cn/s/blog_5327408801019ofa.html http://blog.sina.com.cn/u/2624360105 http://blo ...

  10. ECSHOP 商品页详情页 添加同类随机商品

    1,根目录下找到goods.php文件 找到代码  $smarty->assign('properties',          $properties['pro']);             ...