在Google地图上显示多个点，方法是从数据库中提取名称 [英] Display multiple points on google map by fetching the names from database
问题描述
我是JSP新手。
我有一个要求，我必须建立一个网页，从数据库中获取地址字段（包括街道，地区，城市，交换，国家名称）的记录，并在带有标记的谷歌地图上显示相同的记录。 / p>
为此，我没有地址的纬度/经度，但在数据库中有物理地址详细信息。
有人可以请我在这个建议。
我现在使用的代码如下所示，它需要纬度/ langitue，并且它也适用于单个位置。
我必须根据数据库输出显示多个点，并且输入参数将是它们的物理地址。
var myCenter = new google。 < head>< scriptsrc =};
如果您想在同一张地图上显示多个标记，但只有地址，您可以使用Google地图API v3中的地理编码器功能。
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title> Mapa< / title>
< meta charset =utf-8/>
< style type =text / css>
body {
margin：0;
padding：0;
字体：12px sans-serif;
}
h1，p {
margin：0;
padding：0;
}
< / style>
< / head>
< body>
< div id =googleMapstyle =height：400px;>< / div>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?v=3&sensor=false><<< ; /脚本>
< script>
/ *
*将map映射为全局变量
* /
var map;
var myMarkers = [];
/ *
*创建一个初始化函数
* /
函数initialize（）{
var myCenter = new google.maps.LatLng（51.508742，-0.120850）;
var mapOptions = {
center：myCenter，
zoom：6，
mapTypeId：google.maps.MapTypeId.ROADMAP，
};
map = new google.maps.Map（document.getElementById（googleMap），mapOptions）;
SetMarkers（）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
函数SetMarkers（）{
var geocoder = new google.maps.Geocoder（）;
var myData = [];
//在这里你可以改变这个JSON来调用你的数据库
myData = [
{name：London，address：London，Reino Unido}，
{name：Oxford，地址：Oxford，Reino Unido}，
{名称：Bedford，地址：Bedford，Reino Unido}，
]; （i = 0; i
）{
if（status == google.maps.GeocoderStatus.OK）{
myMarkers [i] = new google.maps.Marker（{
position：results [0] .geometry。地点，
地图：地图
}）;
}其他{
alert（我们找不到地址，GoogleMaps说......+状态）;
}
}）;
}
}
< / script>
< / body>
< / html>
I am new in JSP. I have a requirement where i have to build a webpage which will fetch records of address fields(consist of Street,region,city,exchange,country name) from Database and will display the same on google map with markers.
For this i am not having the latitude/longitude of the address but have the physical address details in the database.
Can someone please suggest me on this.
The current code i am having is like as below, bit it need latitude/langitue and also it for a single location. I have to display multiple points based on database output and input parameter will be their physical address.
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
If you want to display multiple markers on the same map but you only have a address .You can use geocoder function from google Maps API v3.
Here's a demo of how it works this code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mapa</title>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 12px sans-serif;
}
h1, p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="googleMap" style="height: 400px;"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script>
/*
* declare map as a global variable
*/
var map;
var myMarkers = [];
/*
* create a initialize function
*/
function initialize() {
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var mapOptions = {
center: myCenter,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
SetMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
function SetMarkers() {
var geocoder = new google.maps.Geocoder();
var myData = [];
// here you can change this JSON for a call to your database
myData = [
{name: "London", address: "London, Reino Unido"},
{name: "Oxford", address: "Oxford, Reino Unido"},
{name: "Bedford", address: "Bedford, Reino Unido"},
];
for(i = 0; i < myData.length; i++) {
geocoder.geocode({ 'address': myData[i].address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myMarkers[i] = new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
} else {
alert("We can't found the address, GoogleMaps say..." + status);
}
});
}
}
</script>
</body>
</html>
这篇关于在Google地图上显示多个点，方法是从数据库中提取名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
