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. IOS UITabelView的cell

    一.Cell的重用原理 iOS设备的内存有限,如果用UITableView显示成千上万条数据,就需要成千上万个UITableViewCell对象的话,那将会耗尽iOS设备的内存.要解决该问题,需要重用 ...

  2. OC6_复合类的类存管理

    // // Person.h // OC6_复合类的类存管理 // // Created by zhangxueming on 15/6/18. // Copyright (c) 2015年 zhan ...

  3. stl的实现原理简单讲解，通熟易懂

    总结 需要经常随机访问请用vector 2.list list就是双向链表,元素也是在堆中存放,每个元素都是放在一块内存中,它的内存空间可以是不连续的,通过指针来进行数据的访问,这个特点使得它的随机存 ...

  4. 关键字 explicit

    C++中, 一个参数的构造函数(或者除了第一个参数外其余参数都有默认值的多参构造函数), 承担了两个角色. 1 是个构造器 ,2 是个默认且隐含的类型转换操作符. 所以, 有时候在我们写下如 AAA ...

  5. 《JSON必知必会》

    每天上下班在地铁上很适合看这种书,入门级.难点不多.简约不失严谨. 自从全面转向ASP.NET MVC,现在基本上每天都和JSON打交道,效率.习惯.速度都要掌握. 这本书读起来很快,所以读完也蛮有成 ...

  6. ubuntu windows 双系统 磁盘乱搞 grub 导致 error:no such partition grub rescue>

    乱搞分区磁盘什么的导致开机和这位仁兄一样:http://zhidao.baidu.com/question/495602654256708364.html?ssid=0&from=100187 ...

  7. open_clientfd(char* hostname,int port)和open_listenfd(int port)

    #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <string.h&g ...

  8. MySql中，复制旧表结构到新表

    # 创建学生表 create table student(age int,name varchar(32))engine myisam charset utf8;insert into student ...

  9. iis7伪静态

    http://jingyan.baidu.com/article/67508eb4ff92c69cca1ce49a.html

  10. 使用GruntJS构建Web程序

    Gruntjs是JavaScript项目的构建工具,也是基于node的一个命令行工具.很多开源JS项目都是使用它搭建.如jQuery.Qunit.CanJS等.它有以下作用 合并JS文件 压缩JS文件 ...