Angular - 如何使 google 地图在点击标记后显示来自数据库的名称

Question

我使用 Google 地图 AngularJS 指令创建了地图：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>

控制器部分如下所示：

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

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

它工作正常，将所有标记都放在地图上。但下一步是让地图在点击标记时显示一些信息（shop.street、shop.city、shop.street）。我试图通过 ng-click 做到这一点，但我不知道如何正确处理它。

Answer 1

查看有关 $compile 服务的文档，当它作为参数传递给 $compile it returns 组合 link 函数用于其中的任何指令。然后在该 link 函数中，您可以传入一个范围对象（现有范围或可以使用 $rootScope.$new() 创建一个新范围）。

最终看起来像这样：

angular.module('myApp',[])
.directive('someThing', function($rootScope, $compile){
  return function(){
  
    var initialMarkup = "<button ng-click='clicked(shop)'>Click Me</button>";
    var someScope = $rootScope.$new();
    someScope.shop = "some shop details"
    someScope.clicked = function(shop){
      alert(shop);
    }
    var linkedElement = $compile(initialMarkup)(someScope);
    document.body.appendChild(linkedElement[0]);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="myApp">
  <div some-thing></div>
</div>

我之前也将其与 Google 地图一起使用，您可以将其应用于 InfoWindow 内容，但它在第一次通过时确实需要一些摆弄。

Answer 2

显示一些信息 info window 常用于 Google 地图：

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 指令用于初始化信息 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>

Angular - 如何使 google 地图在点击标记后显示来自数据库的名称

Angular - how to make google maps show name from database after clicking on marker

javascript

angularjs

google-maps

google-maps-api-3

angularjs-ng-click