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. 哈希表的C++实现(转)

    哈希表的几个概念: 映像:由哈希函数得到的哈希表是一个映像. 冲突:如果两个关键字的哈希函数值相等,这种现象称为冲突. 处理冲突的几个方法: 1.开放地址法:用开放地址处理冲突就是当冲突发生时,形成一 ...

  2. ClassLoader源码

    最近找工作,面试网易和微策略,都问到了ClassLoader这个东西,看来应该是比较重要的,所以在这总结一下,嗯,类源码有点长,慢慢看吧. 翻译一下,不当之处欢迎指正. /** * A class l ...

  3. js中的一些零碎方法

    ajax表单提交: $.post("do_login", f.serializeArray(), function(data) { if (data.status + " ...

  4. hash桶

    #include <stdio.h> #include <stdlib.h> #include "chain.c" //include the chain. ...

  5. CentOS 下安装JDK

    前提条件 使用干净的centOS 之前肯定没有装过JDK 所以忽略卸载步骤 <1>从SUN下载jdk-1_5_0_14-linux-i586-rpm.bin或jdk-1_5_0_14-li ...

  6. 自己写的一个分页控件类(WinForm)

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; u ...

  7. Mysql 存储过程小例子

    创建存储过程: DELIMITER $$ USE `database_name`$$ DROP PROCEDURE IF EXISTS `add_or_update_user`$$ )) BEGIN ...

  8. location跳转和header跳转的区别

    1:header("location:url") 跳转之前不能有任何输出,如果想在header之前有输出,则要修改php.ini文件.具体 output_handler =mb_o ...

  9. ajax post 时 form数据serialize()

    $.post(UrlAddData, $(".AddForm").serialize(), function (data) { if (data.result) { $.liger ...

  10. 四、记一次失败的 CAS 搭建 之 结果总是那么伤(客户端)

    ==================================================================================================== ...