我的 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>
我应该从数据库加载 map 标记。如何使用 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]
}
}]
最佳答案
关于第二个问题,您应该使用网络服务并将数据表转换为 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);
}
});
关于javascript - 如何以编程方式在 Google map 中添加多个标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36310587/