创建一个连接到数据库的谷歌地图
creating a google map that is connected to database
我正在尝试创建一个谷歌地图。纬度和经度来自数据库,所以我必须把它们放在一个文本框中,然后在脚本中得到它的值。我试过这样做,但它不起作用,你会帮我这个;这是我的JavaScript:
function initMap() {
var lat = document.getElementById('lat');
var lang = document.getElementById('lang');
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
这是html:
<input type="text" style="display: none" id="lat" value="7.8383054" />
<input type="text" style="display: none" id="lang" value="123.2966657" />
<div id="map" ">
</div>
JSfiddle
- 文本字段中的"数字"可以使用。value属性访问:
- google.maps.LatLngLiteral中的lat/lng必须是数字。(如果没有parseFloat, API会抛出这些错误:
- InvalidValueError: setCenter: not a LatLng或latlnliteral: in property lat: not a number
- InvalidValueError: setPosition: not a LatLng或latlnliteral: in property lat: not a number
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
- 你需要实际调用initMap方法(你的小提琴没有这样做)
更新小提琴
代码片段:
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<input type="text" id="lat" value="7.8383054" />
<input type="text" id="lang" value="123.2966657" />
<div id="map" ">
</div>
<script>
function initMap() {
var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);
var uluru = {lat: lat, lng: lang };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
尝试:
var lat = document.getElementById('lat').value;
var lang = document.getElementById('lang').value;
除了没有实际使用文本输入的值或调用返回这些值的函数之外,不确定您的问题在哪里,但也许这些长行可以帮助您开始。如果你需要用户输入不同的lat/lng坐标,那么你还需要分配一个事件处理程序来监听更改或一个按钮来提交新坐标。
<?php
/*
*/
?>
<!doctype html>
<html>
<head>
<title>Google maps</title>
<script src='https://www.google.com/jsapi' charset='utf-8'></script>
<script src='https://maps.google.co.uk/maps/api/js?key=APIKEY' charset='utf-8'></script>
<script type='text/javascript' charset='utf-8'>
function initMap() {
var uluru = {
lat: document.getElementById('lat').value,
lng: document.getElementById('lang').value
};
var options={
zoom: 4,
center: uluru
};
var map = new google.maps.Map( document.getElementById('map'), options );
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
document.addEventListener( 'DOMContentLoaded', initMap, false );
</script>
<style type='text/css' charset='utf-8'></style>
</head>
<body>
<div id='map'></div>
<div>
<input type='text' id='lat' value='7.8383054' />
<input type='text' id='lang' value='123.2966657' />
</div>
</body>
</html>
在body标签中调用initMap()函数。它会加载地图,最重要的是你有API密钥吗?您还需要SSL来使用Google地图。意味着你的url必须是https://yourdomain.com
身体onload = " initMap ()"
相关文章:
- 在谷歌地图上绘制位置数据库
- 使用ASP.NET将谷歌地图添加到项目中,并从数据库中检索位置
- 谷歌地图-数据库中的标记只显示最后一行的信息
- 如何在javascript谷歌地图中获取数据库值
- 将本地MySQL数据库与PHP&谷歌地图上的JavaScript
- 从数据库中的城市创建谷歌地图标记
- 在javascript中从数据库下载坐标时,谷歌地图未显示
- 用sql数据库更新谷歌地图标记
- 如何从数据库中填充谷歌地图信息框
- 如何在谷歌地图上显示我的数据库地址,不带lat和long
- 如何离线使用谷歌地图,从mysql数据库映射位置
- 从数据库加载的位置的谷歌地图标记未显示
- 当谷歌地图标记点移动时,使用纬度和经度更新数据库
- 地址到谷歌地图上的数据库
- 从数据库获取所有纬度和长度以显示谷歌地图上的所有位置
- 当谷歌地图标记移动时更新mysql数据库
- 在谷歌地图上创建一个多边形,并使用MVC将结果保存到数据库中
- 谷歌地图(它没有将结果显示到我的输入窗格中以保存到我的数据库中)
- 谷歌地图 - 如何在数据库中保存位置
- 从数据库中获取多个纬度和经度,并在谷歌地图上显示它们的标记