目前正在开发跟踪英国各地 GPS 坐标的 map ，但是我发现很难确定每个点的独特性，我通常会通过添加某种形式的标签来做到这一点，但似乎 Google Map API V3 只允许最大1 个字符，还有什么我可以尝试的吗？我已经尝试了各种脚本，但似乎没有任何内容适合我当前的设置。
那么有什么机会可以指点一下吗？只需要从 SQL 中提取该部分的简单标签，例如标题。
该页面是使用 VB 在 ASP.NET (Visual Studio 2015) 中设计的。
代码如下:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="VB.aspx.vb" Inherits="VB" %>
<META HTTP-EQUIV="Refresh" CONTENT="60;" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.boldStyle
{
font-size: 10pt;
font-weight: bold;
}
.normalStyle
{
font-size: 10pt;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"title": '<%# Eval("Loco") %>',
"lat": '<%# Eval("TLatitude") %>',
"lng": '<%# Eval("TLongitude") %>',
"description": '<%# "<b>" & "Last Update Time: " & "</b>" & Mid(Eval("LLocation"), 12, 8) & "<br>" & "<b>" & "Current Location: " & "</b>" & Eval("TLocation") & "<br>" & "<b>" & "Loco: " & "</b>" & Eval("Loco") & "<br>" & "<b>" & "Headcode: " & "</b>" & Eval("Position") & "<br>" & "<b>" & " Origin: " & "</b>" & Eval("Origin") & "<br>" & "<b>" & "Destination: " & "</b>" & Eval("destination") & "<b>" & "<br>" & "Status: " & "</b>" & Eval("report_delay")%>'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
center: {lat:53.46, lng: -1.46},
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
label: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 1600px; height: 900px">
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConString %>" SelectCommand="SELECT * FROM [******]"></asp:SqlDataSource>
</form>
最佳答案
我尝试了各种方式，找到的最佳解决方案是基于一些库，例如 http://googlemaps.github.io/libraries.html 对于标签管理，您可以使用 https://github.com/googlemaps/js-map-label
如果您需要大量标签 (>500)，则性能会有点慢，因为标签是像 SVG 一样添加的
添加库后，标签的创建与此类似
aMapLabel = new MapLabel({
text: jsonData[i].ZonaPrg,
position: new google.maps.LatLng(jsonData[i].CentroLat, jsonData[i].CentroLng),
strokeColor: '#000000',
map: map,
fontSize: 15,
minZoom: 16,
strokeWeight: 10,
//fillWeight: 5,
//zIndex: 5200,
align: 'center'
});
关于javascript - Google map 标记的文本标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35779473/