[英]displaying markers on a google map in javascript
I am a Javascript beginner and I am trying to create markers on a google map. 我是Java语言的初学者,我正在尝试在Google地图上创建标记。 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# 因此,首先我要从数据库中获取GPS坐标,然后将其拆分以获取纬度和经度值,然后将它们添加到c#中名为lstBoxLatGPS和lstBoxLongGPS的两个单独的列表框中
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: 现在,在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);
}
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包创建了地图,现在可以使用了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.