javascript - Angular - 如何在点击标记后让谷歌地图显示数据库中的名称

Question

我使用 Google Map AngularJS 指令创建了 map :https://github.com/allenhwkim/angularjs-google-maps

我让它从我的数据库(超过 200 条记录)中导入坐标，如下所示:

<div id="map">
    <ng-map zoom="7" center="[52.00, 19.00]">
        <div ng-repeat="each in $ctrl.shops">
            <marker ng-repeat="shops in each" position="[{{shops.lat}}, {{shops.long}}]" />
        </div>
        <control name="shopMap" opened="true" />
    </ng-map>` 
</div>

Controller 部分如下:

userApi.getShops().then(function (response) {
        vm.shops = response.data;
    });

getShops 只是 Api 的一个函数，它从数据库中获取数据。

它工作正常，将所有标记都放在 map 上。但下一步是让 map 在点击标记时显示一些信息(shop.street、shop.city、shop.street)。我尝试通过 ng-click 来完成，但我不知道如何正确处理它。

Answer 1

显示一些信息info window常用于谷歌地图:

An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map.

Typically you will attach an info window to a marker, but you can also attach an info window to a specific latitude/longitude, as described in the section on adding an info window below.

在angularjs-google-maps 中有一个info-window 指令用于初始化信息窗口。库，下面的示例演示了如何在单击标记后显示信息

示例

angular.module('mapApp', ['ngMap'])

    .factory('userApi', function ($rootScope, $http) {
        var userApi = {
            getShops: function () {
                return $http.get('https://rawgit.com/vgrem/3962c1b67ec14fb734c4f7fccf697027/raw/data.json').then(function (response) {
                    return response.data;
                });
            }
        }
        return userApi;
    })

    .controller('mapController', function ($scope, NgMap, userApi) {

        NgMap.getMap().then(function (map) {
            $scope.map = map;
        });

        userApi.getShops().then(function (data) {
            $scope.shops = data;
        });

        $scope.showShop = function (event, shop) {
            $scope.selectedShop = shop;
            $scope.map.showInfoWindow('myInfoWindow', this);
        };

    });

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
    <ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
        <info-window id="myInfoWindow">
            <div ng-non-bindable>
                <h4>{{selectedShop.name}}</h4>
            </div>
        </info-window>
        <marker ng-repeat="shop in shops"
                position="{{shop.pos}}" title="{{shop.name}}" id="{{shop.id}}" on-click="showShop(event, shop)">
        </marker>
    </ng-map>

</div>