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

我使用Google map AngularJS指令创建了地图：

我让它从我的数据库导入坐标（超过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>

getShops

只是Api中从数据库获取数据的函数

---

把所有的标记都放在地图上，效果很好。但下一步是让地图在点击标记时显示一些信息（shop.street、shop.city、shop.street）。我试着通过点击

ng

来完成它，但我不知道如何正确地接近它

查看有关$compile服务的文档，通常在将某些标记（可以包含指令的内容）作为$compile的参数传递时，它会返回其中任何指令的组合链接函数。然后在该链接函数上，您可以传入一个范围对象（现有范围或使用$rootScope.$new（）创建一个新的范围）

最后看起来像这样：

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

angular.module（'myApp'，[]）
.directive（'someThing'，function（$rootScope，$compile）{
返回函数（）{
var initialMarkup=“单击我”；
var someScope=$rootScope.$new（）；
someScope.shop=“一些店铺详细信息”
someScope.clicked=功能（车间）{
警觉（店铺）；
}
var linkedElement=$compile（initialMarkup）（someScope）；
document.body.appendChild（linkedElement[0]）；
}
});
显示某些信息在谷歌地图中常用：

信息窗口在弹出窗口中显示内容（通常为文本或图像）
窗口位于地图上方的给定位置。“信息”窗口有一个
内容区和锥形茎。阀杆的顶端连接到一个
在地图上指定的位置

通常，您会将信息窗口附加到标记，但也可以
如前所述，将信息窗口附加到特定纬度/经度
在下面关于添加信息窗口的部分中

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

示例


angular.module（'mapApp'，['ngMap']））
.factory（'userApi'，函数（$rootScope，$http）{
var userApi={
getShops:函数（）{
返回$http.get（'https://rawgit.com/vgrem/3962c1b67ec14fb734c4f7fccf697027/raw/data.json，然后（函数（响应）{
返回响应数据；
});
}
}
返回userApi；
})
.controller（'mapController'，函数（$scope，NgMap，userApi）{
NgMap.getMap（）.then（函数（map）{
$scope.map=map；
});
userApi.getShops（）.then（函数（数据）{
$scope.shops=数据；
});
$scope.showShop=功能（事件、商店）{
$scope.selectedShop=shop；
$scope.map.showInfoWindow（'myInfoWindow'，this）；
};
});

{{selectedShop.name}