如何以編程方式在Google地圖中添加多個標記？

Question

我有這樣的代碼在我的ASPX頁面：

<section id="google-map" class="gmap slider-parallax"></section> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="js/jquery.gmap.js"></script> 

<script type="text/javascript"> 
    $('#google-map').gMap({ 

     address: 'riyadh, saudi arabia', 
     maptype: 'ROADMAP', 
     zoom: 6, 
     markers: [{ 
      address: "riyadh, saudi arabia", 
      html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Our mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>', 
      icon: { image: "images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [13, 39] } 
     }, 
    { 
     address: "Al Uyaynah العيينة", 
     html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Ring Road, Al Abageyah, Qism El-KhalifaOur mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>', 
     icon: { image: "images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [13, 39] } 
    }, 
      { 
       address: "Riyadh Province, Saudi Arabia", 
       html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Ring Road, Al Abageyah, Qism El-KhalifaOur mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>', 
       icon: { image: "images/icons/map-icon-red.png", iconsize: [32, 39], iconanchor: [13, 39] } 
      }] 
      , 

     doubleclickzoom: false, 
     controls: { 
      panControl: true, 
      zoomControl: true, 
      mapTypeControl: true, 
      scaleControl: false, 
      streetViewControl: false, 
      overviewMapControl: false 
     } 
    }); 
</script> 

我應該從數據庫加載地圖標記。我如何使用C＃更改以下代碼？

markers: [{ 
    address: "riyadh, saudi arabia", 
    html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Our mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>', 
    icon: { 
     image: "images/icons/map-icon-red.png", 
     iconsize: [32, 39], 
     iconanchor: [13, 39] 
    } 
}, { 
    address: "Al Uyaynah العيينة", 
    html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Ring Road, Al Abageyah, Qism El-KhalifaOur mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>', 
    icon: { 
     image: "images/icons/map-icon-red.png", 
     iconsize: [32, 39], 
     iconanchor: [13, 39] 
    } 
}, { 
    address: "Riyadh Province, Saudi Arabia", 
    html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Ring Road, Al Abageyah, Qism El-KhalifaOur mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>', 
    icon: { 
     image: "images/icons/map-icon-red.png", 
     iconsize: [32, 39], 
     iconanchor: [13, 39] 
    } 
}] 

Answer 1

關於第二個問題，您應該使用Web服務並將數據錶轉換爲JSON格式，然後您就可以在JavaScript中使用JSON。

WEB SERVICE

[WebMethod] 
[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)] 
public void GetMaps(string mapId) 
{ 
    DataTable dt = new DataTable(); 

    dt = dataClass.data.get(mapId); 

    string jsonString = string.Empty; 
    jsonString = JsonConvert.SerializeObject(dt); 
    Context.Response.Clear(); 
    Context.Response.ContentType = "application/json"; 
    Context.Response.Flush(); 
    Context.Response.Write(jsonString); 

} 

通過下面的代碼，你可以從Web服務得到JSON格式

  var senderData = { mapId: "1" } 

      $.ajax({ 
       type: "POST", 
       url: "/webservice.asmx/GetMaps", 
       processData: false, 
       contentType: "application/json; charset=utf-8", 
       data: JSON.stringify(senderData), 

       success: function (response) { 

        //JSON format is in items 
        var items = eval(response.d); 


       }, 
       error: function (error) { 
        console.log(error); 
       } 


      });