Question

目前正在研究围绕英国GPS跟踪的地图，但是我发现每个点的难度都很难，我通常会通过添加一种标签来实现这一点，但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>

Answer 1

我尝试过多种方式，找到的最佳解决方案基于http://googlemaps.github.io/libraries.html等一些库对于标签管理，您可以使用https://github.com/googlemaps/js-map-label

如果您需要大量的labe 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'
            });

Answer 2

Google RichMarker可以让您通过编写HTML和CSS来创建标记。有a simple tutorial如何使用它。上面的图片是我今天所做的截图。

以下是我如何做的代码。

用于创建标记的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>'  
    });

标记的CSS

      .label_content{
      position:relative;
      border-radius: 5px;
      padding:5px;
      color:#ffffff;
      background-color: red;
      font-size: 20px;
      width: 100%;
      line-height: 20px;
      text-align: center;
      }

      .label_content:after {
      content:'';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -10px;
      width: 0;
      height: 0;
      border-top: solid 10px red;
      border-left: solid 10px transparent;
      border-right: solid 10px transparent;
      }

Google地图标记的文字标签

2 个答案: