google maps v3 添加自定義圖標(marker,overlay)

時間 2019-11-16

標籤 google maps v3 添加自定義圖標 marker overlay 欄目 Google 简体版

原文原文鏈接

google搜了好久都沒找到符合v3版本的google maps自定義圖標,能夠讓圖標使用本身的html,都是V2版本的,依靠重寫google api屬性來完成.javascript

而後就找了個jquery下的google maps插件: GMAP3(http://gmap3.net)css

通過研究發現...這貨很方便,並且我也實現了本身的圖標!html

個人自定義圖標使用的是bootstrap插件:font-awesome中的icon.java

首先,引入jquery

<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>

而後簡歷一個jsonjson

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的方法:bootstrap

$(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部分:canvas

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

至關方便!直接產生了地標背景上出現圖標,並且仍是json方式的,方便咱們生成!api

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。