javascript - 从地址列表加载谷歌地图时遇到问题
问题描述
我有一个问题,我真的尝试了一切!
我的网站上有一个页面,它加载了一个谷歌地图,从 mysql 数据库中获取地址列表。它正在工作,但不知何故现在它不再工作了。
这是加载地图的脚本:
<div id="map-canvas"></div>
<script type="text/javascript">
function initMap() {
var centro = new google.maps.LatLng(45.701116, 9.665754);
var mapOptions = {
zoom: 15,
center: centro
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString0 = '<div class="title">you are here!<div id="bodyContent"></div>';
//recupero
<?php for($i = 0; $i < count($indirizzi); $i++) { ?>
var contentString = '<div class="title">'<?php $nome_shop = str_replace(" ", "+",
$nomi[$i]); ?> + '<a href=kiwishop.php?shop=<?= $nome_shop ?>>
<?= $nomi[$i] ?></a></div><div class="address"><?= $sottotitoli[$i] ?></div>';
var infowindow<?= $i ?> = new google.maps.InfoWindow({
content: contentString
});
var location = "<?= $indirizzi[$i] ?>";
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode( { 'address': location}, function(results, status) {
if (status == 'OK') {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
}
var marker<?= $i ?> = new google.maps.Marker({
map: map,
position: {lat: lat, lng: lng},
title: '<?= $nomi[$i] ?>',
icon: '<?= $iconemappa[$i] ?>'
});
google.maps.event.addListener(marker<?= $i ?>, 'click', function() {
<?php for($j = 0; $j < count($indirizzi); $j++) { ?>
infowindow<?= $j ?>.close();
//not working
<?php } ?>
infowindow<?= $i ?>.open(map,marker<?= $i ?>);
});
});
<?php } ?>
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AGzaNyBMYf1ZkLWd7VGH4q_I5eF92JK6cdfcFCs&callback=initMap"></script>
变量 $indirizzi (addresses) 、 $nomi 等是以前从数据库中检索的,我在它们上使用了 htmlentities() 函数。我认为问题来自特殊字符,例如 è 或 ',因为当我在数据库中的行较少时,地图正在工作。我得到一个 Unespected identifier 错误.. 然后 initMap 不是一个函数
更新:
我修复了地址中的单引号问题。现在地图加载但只有前十一个标记。这是最后一个加载的标记(marker10)和第一个未加载的标记(marker11)的渲染代码
var contentString = '<div class="title">' + '<a href=kiwishop.php?shop=Artisan+Cafè>Artisan Cafè</a></div><div class="address">Cocktail esplosivi e tapas deliziose</div>';
var infowindow10 = new google.maps.InfoWindow({
content: contentString
});
var location = "Via San Bernardino 53, Bergamo";
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode( { 'address': location}, function(results, status) {
if (status == 'OK') {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
}
var marker10 = new google.maps.Marker({
map: map,
position: {lat: lat, lng: lng},
title: 'Artisan Cafè',
icon: '../images/icons/borgo-drink.png'
});
});
var contentString = '<div class="title">' + '<a href=kiwishop.php?shop=Atelier+di+Rita+Patelli>Atelier di Rita Patelli</a></div><div class="address">Composizioni e creazioni con materiali naturali</div>';
var infowindow11 = new google.maps.InfoWindow({
content: contentString
});
var location = "Via Borgo Canale 9b, Bergamo";
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode( { 'address': location}, function(results, status) {
if (status == 'OK') {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
}
var marker11 = new google.maps.Marker({
map: map,
position: {lat: lat, lng: lng},
title: 'Atelier di Rita Patelli',
icon: '../images/icons/borgo-artigiani.png'
});
});
对于数据库中所有剩余的地址,我收到此错误:“InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number”。
所以我猜地理编码器不喜欢这些地址?但他们是正确的!我用 console.log() 打印了所有变量位置,它们很好(我可以看到所有变量)。我在 if 语句之前打印了状态变量,我只得到 11 OK。生成标记的代码是正确的,因为如果我创建一个只有 marker11 的地图,它可以工作。但不知何故,地图会在某个时候停止加载标记。
有任何想法吗?
再次感谢!
解决方案
我解决了这个问题。这是由谷歌地图限制引起的
推荐阅读
- javascript - 由于“RangeError: Invalid typed array length”而无法加载 GLB 模型
- android - 如何在 ConstraintLayout 中垂直拉伸中间视图
- java - 如何证明算法的时间复杂度?
- reactjs - Material Ui DataGrid IsRowSelectable 在 React ts 中不起作用
- html - 为什么图像不会直接移动到网页的中心(不是中间)
- reactjs - 使用 Redux 访问 API
- php - 使用 Perfex CRM 为管理员和客户创建模块 - 需要帮助
- ios - `UIScreen.main.bounds.height - frame(in: .global).minY` 在 iOs 的屏幕边缘下方如何?
- javascript - user.roles 未定义,即使用户已定义且具有角色变量 discordjs
- vb.net - vb.net 在按钮中更改 2 个不同文本的位置