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. PHP自定义日期英文格式 Feb 11,2015

    背景:[PHP小工具]项目中,经常会要求多版本语言支持,而日期也是必不可少的组成元素. 英文日期书写顺序分英式和美式,举例如. 美国:月日年(January 8th,2014 或 January 8, ...

  2. JS面向对象5中写法

    //定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14 ...

  3. sql2000下如何新建并使用dbml

    默认新建的dbml只是支持sql2005及其以上版本. 但是现在是sql2000怎么办?我要是想要用linq to sql 的? 解决方案如下: 1首先打开cmd,在其中cd到sqlmetal.exe ...

  4. ASP.NET MVC 之控制器与视图之间的数据传递

    今天,我们来谈谈控制器与视图之间的数据传递. 数据传递,指的是视图与控制器之间的交互,包括两个方向上的数据交互,一个是把控制器的数据传到视图中,在视图中如何显示数据,一个是把视图数据传递到控制器中, ...

  5. String 转Clob

    把String转Clob java.sql.Clob c = new javax.sql.rowset.serial.SerialClob("abc".toCharArray())

  6. UVaLive 3708

    题意:周长为10000的圆上等距分布n个雕塑,求再加入m个雕塑后,为使所有雕塑等距分布所需移动原来n个雕塑的最小总距离. 分析:计算相对距离. #include<cstdio> #incl ...

  7. sphinx 占用大量内存

    http://www.coreseek.com/forum/2_1847_0.html(转) 刚开始没改下面2句时,内存占用比较多,在生成index的时候就占用了! 下面是解决方法: 每个索引中写上 ...

  8. javascript 文本框中,判断回车键触发事件 兼容IE&FireFox

    1.onkeypress&onkeydown区别 onkeypress 事件在用户按下并放开任何字母数字键时发生.但是系统按钮(例如:箭头键.功能键)无法得到识别. onkeydown 事件在 ...

  9. C#代码分层的好处

    1.对于复杂的系统,分层让代码结构清晰,便于开发人员对系统进行整体的理解.把握.如果代码没有分层,把逻辑都写在一个方法里面的代码就好比是一本没有目录的文档,要找出其中某一节都要对全文遍览一次. 2.基 ...

  10. JavaScript jQuery 入门回顾 2

    JQuery 滑动 利用jQuery可以在元素上创建滑动效果. slideDown() 向下滑动元素. slideUp() 向上滑动元素. slideToggle() 在 slideDown() 与 ...