[英]How do I add multiple markers in Google Maps programmatically?
我的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]
}
}]
關於第二個問題,您應該使用Web服務並將數據表轉換為JSON格式,然后您就可以在JavaScript中使用JSON。
網絡服務
[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);
}
通過以下代碼,您可以從webservice獲取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);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.