用javascript在谷歌地图上显示标记
displaying markers on a google map in javascript
我是一个Javascript初学者,我试图在谷歌地图上创建标记。所以首先,我从数据库中获取GPS坐标,我将其分开以获得纬度和经度值,然后我将它们添加到c#中名为lstBoxLatGPS和lstBoxLongGPS的两个单独的列表框中
foreach (string item in GPSLatList)
{
lstBoxLatGPS.Items.Add(item);
}
foreach (string item in GPSLongList)
{
lstBoxLongGPS.Items.Add(item);
}
现在在Javascript中,我想在列表框中获取项目并在地图上创建标记,我有两个函数:
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包,现在可以工作了
相关文章:
- 无法在JS中显示谷歌地图
- 在Delphi TWebBrowser中按地址显示谷歌地图
- 使用来自URL的JSON数据来显示谷歌地图标记-如何
- 逐步显示谷歌地图方向
- OpenLayers显示谷歌地图
- firefox中没有显示谷歌地图
- 如何通过JavaScript代码显示谷歌地图并在设备上获取坐标
- 显示谷歌地图点击事件 - 谷歌地图API
- 切换隐藏/显示谷歌地图标记
- Odoo-在弹出窗口中显示谷歌地图片段
- 从数据库获取所有纬度和长度以显示谷歌地图上的所有位置
- 如何缩放 html5 画布以显示谷歌地图坐标
- 标记标签未显示 - 谷歌地图
- 如何使用模板中的数据显示谷歌地图
- 自定义和原始标记都显示谷歌地图 api v3
- 使用 geoxml3 隐藏/显示谷歌地图中的一些地标
- 显示谷歌地图 API 的骨干/木偶问题
- HIde或显示谷歌地图中的标记
- 如何在Laravel视图页面中动态显示谷歌地图标记
- Phonegap不会在手机中显示谷歌地图