如何在谷歌地图中用标签标记多个位置

时间:2019-03-17 18:26:29

标签: javascript asp.net

我想用标签实现多个标记,并且在编写代码时遇到一些问题。我有位置列表,有时可能是更多记录。位置具有属性。所以我需要用属性数量和缩放选项标记这些位置。这是我的代码。但是我不能这样做。this is my requirement

     <script type="text/javascript">
            var markers = [<asp:Repeater ID="rptMarkers" runat="server"><ItemTemplate>{"count": '<%# Eval("Count") %>',"title": '<%# Eval("title") %>',"description": '<%# Eval("City") %>'}</ItemTemplate><SeparatorTemplate>,</SeparatorTemplate></asp:Repeater>];
</script>


    <script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5tTrgqaHnZ5K90JHmAzjS3Dk0gyBhC0g&callback=initMap&libraries=places"  async defer></script>

<script type="text/javascript">

var map;
var service;
var infowindow;

function initMap() 
{ 

  infowindow = new google.maps.InfoWindow();
  var mapOptions ={
          center: {lat: 6.55282, lng: 80},
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

  map = new google.maps.Map(document.getElementById('map'),mapOptions);   

  for(var x=0;x<markers.length;x++)
  { 
      var data = markers[x];
      var request = {
          query: data.description,
          fields: ['name', 'geometry'],

      };
      var service = new google.maps.places.PlacesService(map);

      service.findPlaceFromQuery(request, function(results, status) 
      {         
          if (status === google.maps.places.PlacesServiceStatus.OK) 
          {
              var marker = new google.maps.Marker({
                  map: map,              
                  title: results[0].name,
                  position: results[0].geometry.location,
                  label: { color: '#FFFFFF', fontWeight: 'bold', fontSize: '14px', text: data.count},
              });    
              map.setCenter(results[0].geometry.location);
          }
      });
  }


}



</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>

    <div id="map" style="height:500px;width:500px;"></div>    

    </div>
    </form>

0 个答案:

没有答案