[英]Displaying markers on google map from mysql database using php/javascript
[英]displaying markers on a google map in javascript
我是Java語言的初學者,我正在嘗試在Google地圖上創建標記。 因此,首先我要從數據庫中獲取GPS坐標,然后將其拆分以獲取緯度和經度值,然后將它們添加到c#中名為lstBoxLatGPS和lstBoxLongGPS的兩個單獨的列表框中
foreach (string item in GPSLatList)
{
lstBoxLatGPS.Items.Add(item);
}
foreach (string item in GPSLongList)
{
lstBoxLongGPS.Items.Add(item);
}
現在,在Javascript中,我想獲取列表框中的項目並在地圖上創建標記,我有2個功能:
function GetLatValues()
{
var arrValues= new Array();
var listBox = document.getElementById("<%=lstBoxLatGPS.ClientID%>");
for (var i = 0; i < listBox.options.length; i++)
{arrValues[i]= listbox.options[i].text }
return (arrValues);
}
function GetLongValues()
{
var arrValues= new Array();
var listBox = document.getElementById("%=lstBoxLongGPS.ClientID%>");
for (var i = 0; i < listBox.options.length; i++)
{arrValues[i]= listbox.options[i].text }
return (arrValues);
}
然后將數組添加到標記中:
function initialize()
{
var mapCanvas = document.getElementById('map-canvas');
var mapOptions =
{
center: new google.maps.LatLng(-28.4792811, 24.6722268),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
map.set('styles', [
{
"featureType": "landscape",
"stylers": [
{ "color": "#c9d7bb" }
]
}, {
"featureType": "administrative.province",
"elementType": "labels.text",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffc23d" }
]
}, {
"featureType": "poi.attraction",
"stylers": [
{ "visibility": "on" },
{ "color": "#9be586" }
]
}, {
"featureType": "administrative.province",
"elementType": "geometry",
"stylers": [
{ "visibility": "on" },
{ "color": "#000000" },
{ "weight": 3.2 }
]
}
]);
var GPSLatArray = new Array();
var GPSLongArray = new Array();
GPSLatArray = GetLatValues();
GPSLongArray = GetLongValues();
for (var i = 0; i < GPSLatArray.length; i++)
{
var marker = new google.maps.Marker({position: GPSLatArray[i],GPSLongArray[i] });
marker.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
當應該顯示地圖時,它只是空白,根本沒有顯示地圖。
您需要在aspx頁面中添加div才能顯示地圖。
<div class="img-thumbnail" id="map-canvas" style="width: 369px; height: 289px;"></div>
我使用Artem.Google包創建了地圖,現在可以使用了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.