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. POJ 2528 Mayor’s posters

    Mayor's posters Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 37982   Accepted: 11030 ...

  2. JAVA_SE复习（Class）

    一.面向对象程序设计(OOP) 1.面向对象的程序设计是程序开发的一种方法.它将对象作为程序的基本单元,将程序和 数据封装其中,以提高软件的重用性.灵活性和扩展性 2.三个特征: 封装:隐藏信息 继承 ...

  3. bootstrap响应式网页设计的9条基本原则！

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

  4. wamp Server2.5 配置 自定义目录

    煎熬了两天终于找到了方法!!! 前提先改成中文 右键"W"图表-> Language -> chinese; 成功改为中文. 自定义目录步骤: 一.添加一个Alias ...

  5. ACE_linux：TCP通信

    1.涉及类 ACE_INET_Addr//ACE网络地址ACE_SOCK_Acceptor//ACE网络服务器ACE_SOCK_Connector//ACE网络客户端ACE_SOCK_Stream// ...

  6. fill与memset的区别

    fill 的头文件是<iostream> 命名空间是std: 在memset(a,0(-1),sizeof(a))全部初值定为0或-1时两者是没有多大区别; 但是在初值为其他值得时候就不同 ...

  7. 自从用了Less 编写css，你比以前更快了~（sublime编译）

    之所以用这个标题呢,主要是最近调侃杰伦太有意思了. 好吧,开个玩笑而已. 如果你了解过Less,并对之很熟悉,就不用往下看了. 如果你没用过,恭喜,这是一个入门级的教程,学会了它,可以为你节省10%的 ...

  8. Pox启动及事件产生、监听分析

        ./pox/pox.py , Pox       实例化core=pox.core.initialize(),即为实例化POXCore类(该类是所有组件的交接点,提供组件注册功能),监听cor ...

  9. 【IOS】分享下近一年IOS开发的经验总结

    从上个暑假末到现在,自己做IOS开发也快一年了.从一开始的什么都不知道,到现在大多事都能搭上一两手,期间经历了很多事情.下面来和大家分享一下心得和感触. 1.现在移动领域的知识更新的很快,无论是IOS ...

  10. 插入排序(insertion_sort)

    最简单的排序算法,又称插值排序,原理类似于打扑克牌时把摸到的牌插入手中已有序牌的过程. void insertion_sort(int* A ,int n){ int i,j,key; ;i < ...