I am a Javascript beginner and I am trying to create markers on a google map. So first of all I am getting GPS co-ordinates from a database which I am splitting apart to get the lattitude and longlitude values, then I am adding them to 2 separate listboxes called lstBoxLatGPS and lstBoxLongGPS in c#
foreach (string item in GPSLatList)
{
lstBoxLatGPS.Items.Add(item);
}
foreach (string item in GPSLongList)
{
lstBoxLongGPS.Items.Add(item);
}
Now in Javascript I want to take the items in the listboxes and create markers on the map I have 2 functions:
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);
}
then to add the arrays to made the markers:
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);
When the map is supposed to be displayed, it is just blank, not showing the map at all.
您需要在aspx页面中添加div才能显示地图。
<div class="img-thumbnail" id="map-canvas" style="width: 369px; height: 289px;"></div>
我使用Artem.Google包创建了地图,现在可以使用了。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.