- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我从 JSON 响应中获取字符串形式的纬度和经度。我正在解析响应,提取它们,然后将它们存储在一个数组中。然后,我使用该数组在使用 Google map 的 map 上填充标记。
我的问题是,当我对位置数组中的值进行硬编码时,例如:var locations = [["开心餐厅", 37.328255, -121.883693]];
标记已成功填充。但是当我使用 locations.push([f.restaurant_name, parseFloat(Number(f.address.latitude)), parseFloat(Number(f.address.longitude))]);
标记不是在 map 上居住。硬编码值工作完美,但不知何故,它无法使用我的数组填充 map ,该数组从具有相同数据的 JSON 解析响应中填充。我尝试使用 parseFloat
和 Number
方法。还尝试了 toString
。似乎没有任何效果。我在这里缺少什么?
我的代码:
map .js:
var locations = [];
$.getJSON("http://localhost:63342/295%20Project/api/response.json?",
function(data) {
$.each(data, function(i, f) {
//Log prints accurate data
console.log(f.restaurant_name + " " + parseFloat(Number(f.address.latitude)) + " " + parseFloat(Number(f.address.longitude)));
// tried using Number() parseFloat() and parseFloat(Number()) without success
locations.push(f.restaurant_name, parseFloat(Number(f.address.latitude)), parseFloat(Number(f.address.longitude)));
});
});
//create the map
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: new google.maps.LatLng(37.328255, -121.883693),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker;
var i;
//populate the markers on map (works with hardocded values in the locations array)
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, "click", (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
//redirect markers to restaurant_detail.html
}
})(marker, i));
}
响应.json:
[{
"restaurant_name": "Happy Eating",
"address": {
"longitude": -121.883693,
"city": "San Jose",
"zip": "95112",
"latitude": 37.328255,
"state": "CA",
"street_address": "545 S Second St"}
}]
html:
<div id="map" style="width: 100%; height: 400px;"></div>
最佳答案
你正在访问 locations[i][1]
就好像 locations[i]
是一个数组,但你是 push
当前将单个原语发送到位置
。尝试将数组 推送到位置
:
locations.push([f.restaurant_name, f.address.latitude, f.address.longitude]);
此外,与其乱用 IIFE 来处理 var
的函数作用域问题,您可能会发现使用 let
编写代码要容易得多,它具有 block 范围并且更容易处理。或者,更好的是,使用 forEach
直接迭代。
另一个问题是您需要确保在调用 localhost 之后而不是之前填充 map 。照原样,您创建 map 的代码会在发出请求后立即运行,而无需等待响应。相反,仅在响应返回后才创建 map :
fetch('http://localhost:63342/295%20Project/api/response.json?')
.then((data) => data.json())
.then((data) => {
const locations = data.map(({ restaurant_name, address: { latitude, longitude }}) => (
[restaurant_name, latitude, longitude]
));
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: new google.maps.LatLng(37.328255, -121.883693),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
const infowindow = new google.maps.InfoWindow();
locations.forEach(([name, lat, lng]) => {
const marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
google.maps.event.addListener(marker, "click", () => {
infowindow.setContent(name);
infowindow.open(map, marker);
});
});
});
关于javascript - 如何正确解析包含位置信息的 JSON 字符串数据以创建 Google map 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49972830/
如何使用 SPListCollection.Add(String, String, String, String, Int32, String, SPListTemplate.QuickLaunchO
我刚刚开始使用 C++ 并且对 C# 有一些经验,所以我有一些一般的编程经验。然而,似乎我马上就被击落了。我试过在谷歌上寻找,以免浪费任何人的时间,但没有结果。 int main(int argc,
这个问题已经有答案了: In Java 8 how do I transform a Map to another Map using a lambda? (8 个回答) Convert a Map>
我正在使用 node + typescript 和集成的 swagger 进行 API 调用。我 Swagger 提出以下要求 http://localhost:3033/employees/sear
我是 C++ 容器模板的新手。我收集了一些记录。每条记录都有一个唯一的名称,以及一个字段/值对列表。将按名称访问记录。字段/值对的顺序很重要。因此我设计如下: typedef string
我需要这两种方法,但j2me没有,我找到了一个replaceall();但这是 replaceall(string,string,string); 第二个方法是SringBuffer但在j2me中它没
If string is an alias of String in the .net framework为什么会发生这种情况,我应该如何解释它: type JustAString = string
我有两个列表(或字符串):一个大,另一个小。 我想检查较大的(A)是否包含小的(B)。 我的期望如下: 案例 1. B 是 A 的子集 A = [1,2,3] B = [1,2] contains(A
我有一个似乎无法解决的小问题。 这里...我有一个像这样创建的输入... var input = $(''); 如果我这样做......一切都很好 $(this).append(input); 如果我
我有以下代码片段 string[] lines = objects.Split(new string[] { "\r\n", "\n" }, StringSplitOptions.No
这可能真的很简单,但我已经坚持了一段时间了。 我正在尝试输出一个字符串,然后输出一个带有两位小数的 double ,后跟另一个字符串,这是我的代码。 System.out.printf("成本:%.2
以下是 Cloud Firestore 列表查询中的示例之一 citiesRef.where("state", ">=", "CA").where("state", "= 字符串,我们在Stack O
我正在尝试检查一个字符串是否包含在另一个字符串中。后面的代码非常简单。我怎样才能在 jquery 中做到这一点? function deleteRow(locName, locID) { if
这个问题在这里已经有了答案: How to implement big int in C++ (14 个答案) 关闭 9 年前。 我有 2 个字符串,都只包含数字。这些数字大于 uint64_t 的
我有一个带有自定义转换器的 Dozer 映射: com.xyz.Customer com.xyz.CustomerDAO customerName
这个问题在这里已经有了答案: How do I compare strings in Java? (23 个回答) 关闭 6 年前。 我想了解字符串池的工作原理以及一个字符串等于另一个字符串的规则是
我已阅读 this问题和其他一些问题。但它们与我的问题有些无关 对于 UILabel 如果你不指定 ? 或 ! 你会得到这样的错误: @IBOutlet property has non-option
这两种方法中哪一种在理论上更快,为什么? (指向字符串的指针必须是常量。) destination[count] 和 *destination++ 之间的确切区别是什么? destination[co
This question already has answers here: Closed 11 years ago. Possible Duplicates: Is String.Format a
我有一个Stream一个文件的,现在我想将相同的单词组合成 Map这很重要,这个词在 Stream 中出现的频率. 我知道我必须使用 collect(Collectors.groupingBy(..)
我是一名优秀的程序员,十分优秀!