javascript 如何使用 angular-google-maps <markers> 指令？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22697251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use angular-google-maps <markers> directive?
提问by user602525
I'm using angular-google-maps in my project:
我在我的项目中使用 angular-google-maps：
http://angular-google-maps.org/
http://angular-google-maps.org/
I'm trying to add multiple markers, using objects of the following definition:
我正在尝试使用以下定义的对象添加多个标记：
vehicles = [
{
stuff: "stuff",
last_known_location: {
latitude: number,
longitude: number
}
},
{
stuff: "stuff",
last_known_location: {
latitude: number,
longitude: number
}
},//...etc
]
My directive looks like:
我的指令看起来像：
<markers models='vehicles'
coords='vehicles.last_known_location' >
</markers>
vehicles is an array of objects as described above.
车辆是如上所述的对象数组。
This doesn't work. If I change my model to just have properties of latitude and longitude and completely lose the last_known_location property and change my directive coords='self' then it works fine. What do I need to do to get this working with my json structure?
这不起作用。如果我将模型更改为仅具有纬度和经度属性并完全丢失 last_known_location 属性并更改我的指令 coords='self' 那么它就可以正常工作。我需要做什么才能使我的 json 结构正常工作？
回答by Alfonso Pérez
As you figured out, it's stated in here: http://angular-ui.github.io/angular-google-maps/#!/api/markersthat the value of the property coordsmust be between quotes.
正如您所发现的，它在这里说明：http: //angular-ui.github.io/angular-google-maps/#!/api/markers属性坐标的值必须在引号之间。
Also, in v1.1, for each marker you need to define an id(the name of the id property is given by idKey), which defaults to model.id,
此外，在 v1.1 中，您需要为每个标记定义一个 id（id 属性的名称由idKey给出），默认为 model.id，
so, in your case, and for it to work now it would have to be
所以，在你的情况下，为了让它现在起作用，它必须是
<markers models="vehicles" coords="'last_known_location'"></markers>
and the vehicles array, for instance:
和车辆阵列，例如：
$scope.vehicles = [{
id: "first",
stuff: "stuff",
last_known_location: {
latitude: 37.3694868,
longitude: -5.9803275
}
}];
(Notice the idproperty)
（注意id属性）
回答by jOshT
I don't think you need to define the array again after you already defined it for you models. Can you try:
我认为在为您的模型定义数组之后，您不需要再次定义它。你能试一下吗：
<markers models='vehicles' coords='last_known_location'> </markers>
If you didn't have them within last_known_location and just within the parent object, the API says you can use 'self' to identify the the objects contain lat and lng
如果你在 last_known_location 和父对象中没有它们，API 说你可以使用“self”来识别包含 lat 和 lng 的对象
回答by Rob Allen
Two things:
两件事情：
First, add []to your definition of last_known_locationin order to make it an array of objects. In this test page for Angular Google Maps, the coords do not work without it. http://www.directiv.es/angular-google-maps
首先，添加[]到您的定义last_known_location中以使其成为对象数组。在 Angular Google Maps 的这个测试页面中，没有它坐标就不能工作。http://www.directiv.es/angular-google-maps
Second, make sure vehiclesis accessible to your module. The best way to do that is by making it a part of $scope.
其次，确保vehicles您的模块可以访问。最好的方法是让它成为$scope.
angular.extend($scope,
{
vehicles:
stuff = "stuff",
last_known_location: [{
latitude: 45,
longitude: -74
}]
});
Then the markup in @jOshT's response will work:
然后@jOshT 响应中的标记将起作用：
<marker models='vehicles' coords='last_known_location'> </markers>
UPDATE
更新
Per comments, I misunderstood that this implementation is using markersinstead of marker. The former requires the coordsobject to be a stringand the later requires an expression. Serializing the last_known_locationwith the original code will work.
根据评论，我误解了这个实现使用的是标记而不是标记。前者要求coords对象是 a string，后者要求对象是 expression。last_known_location使用原始代码序列化将起作用。
