Javascript 谷歌地图标记的文本标签_Javascript_Html_Google Maps_Google Maps Api 3

Javascript 谷歌地图标记的文本标签

javascript html google-maps google-maps-api-3

Javascript 谷歌地图标记的文本标签,javascript,html,google-maps,google-maps-api-3,Javascript,Html,Google Maps,Google Maps Api 3,目前正在英国各地进行GPS坐标地图跟踪工作，但我发现很难确定每个点的唯一性，我通常会通过添加一种形式的标签来实现这一点，但Google map API V3似乎只允许最多1个字符，还有什么我可以尝试的吗？我尝试了各种脚本，但在我当前的设置中似乎没有任何效果有没有可能找到一些指点？只需要从SQL中提取一个简单的节标签，例如标题该页面是在ASP.NET（Visual Studio 2015）中使用VB设计的代码如下： <%@ Page Language="VB" AutoEven

目前正在英国各地进行GPS坐标地图跟踪工作，但我发现很难确定每个点的唯一性，我通常会通过添加一种形式的标签来实现这一点，但Google map API V3似乎只允许最多1个字符，还有什么我可以尝试的吗？我尝试了各种脚本，但在我当前的设置中似乎没有任何效果

有没有可能找到一些指点？只需要从SQL中提取一个简单的节标签，例如标题

该页面是在ASP.NET（Visual Studio 2015）中使用VB设计的

代码如下：

    <%@ 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>


.粗体字
{
字号：10pt；
字体大小：粗体；
}
.normalStyle
{
字号：10pt；
}
变量标记=[
{
“标题”：“，
“lat”：“，
“液化天然气”：“，
“说明”：“
}
,
];
window.onload=函数（）{
变量映射选项={
中心：{lat:53.46，lng:-1.46}，
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var infoWindow=new google.maps.infoWindow（）；
var map=new google.maps.map（document.getElementById（“dvMap”）、mapOptions）；
对于（i=0；i



我以各种方式尝试过，找到的最佳解决方案是基于一些库，如
对于标签管理，您可以使用
如果您需要很多标签l（>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'
            });

我以各种方式尝试过，找到的最佳解决方案是基于一些库，如
对于标签管理，您可以使用
如果您需要很多标签l（>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'
            });


可以通过编写HTML和CSS来创建标记。如何使用这个有很多问题。上图是我今天所做事情的截图
下面是我如何做到这一点的代码
用于创建标记的JS代码
    var marker = new RichMarker({
        map: map,
        shadow: 'none',
        position: new google.maps.LatLng(data.lat, data.lng),
        content: '<div><div class="label_content">' + data.title // the data title you want to display
        + '</div></div>'  
    });


可以通过编写HTML和CSS来创建标记。如何使用这个有很多问题。上图是我今天所做事情的截图
下面是我如何做到这一点的代码
用于创建标记的JS代码
    var marker = new RichMarker({
        map: map,
        shadow: 'none',
        position: new google.maps.LatLng(data.lat, data.lng),
        content: '<div><div class="label_content">' + data.title // the data title you want to display
        + '</div></div>'  
    });

您如何让RichMarkers在VS2015内工作？无法找到如何让VS2015获取“RichMarker”commands@JamieB您只需在项目中包含richmarkers js文件。感谢您链接到此文件。它完全符合我的目的。请注意，库中说它没有被积极维护，但仍然可以正常工作。如何让RichMarkers在VS2015中工作？无法找到如何让VS2015获取“RichMarker”commands@JamieB您只需在项目中包含richmarkers js文件。感谢您链接到此文件。它完全符合我的目的。请注意，该库表示它没有被积极维护，但仍然可以正常工作。