如何在传单地图上绘制标记
How to Plot Markers on leaflet map
我能够以 json 格式从数据库中获取我的数据,目前我可以在控制台中看到数据,所以我的问题是如何从经纬度绘制标记我使用这个 ajax 调用检索到了它。
如何在函数成功时获得标记
$(document).ready(function () {
$(function () {
var pData1 = [];
var jsonData = JSON.stringify({ pData1: pData1 });
// var jsonArray = JSON.parse(JSON.stringify(jsonData));
$.ajax({
type: "POST",
url: "map.aspx/getCityPopulation2",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
});
function OnSuccess(response) {
console.log(response.d)
}
最简单的方法是循环遍历标记并将它们添加到地图
这里有一个工作示例http://codepen.io/hkadyanji/pen/BLyYYY
//select the div that holds the map object
var mymap = document.querySelector("#map")
// ... initialize the leaflet map as expected -> such as adding a tile layer
//a function to add the markers to the map
//you will call this function passing the resulting array from
//the ajax call as the parameter
function addToMap(locationArray){
//iterates through the array object called from the server
[].forEach.call(locationArray, function(location){
var marker = L.marker([location.lat, location.lng]).addTo(mymap);
//you can even add a custom popup for the individual marker
//marker.bindPopup("custom pop up content goes here").openPopup();
}
}
如何在函数成功时获得标记
$(document).ready(function () {
$(function () {
var pData1 = [];
var jsonData = JSON.stringify({ pData1: pData1 });
// var jsonArray = JSON.parse(JSON.stringify(jsonData));
$.ajax({
type: "POST",
url: "map.aspx/getCityPopulation2",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
});
function OnSuccess(response) {
console.log(response.d)
}
最简单的方法是循环遍历标记并将它们添加到地图
这里有一个工作示例http://codepen.io/hkadyanji/pen/BLyYYY
//select the div that holds the map object
var mymap = document.querySelector("#map")
// ... initialize the leaflet map as expected -> such as adding a tile layer
//a function to add the markers to the map
//you will call this function passing the resulting array from
//the ajax call as the parameter
function addToMap(locationArray){
//iterates through the array object called from the server
[].forEach.call(locationArray, function(location){
var marker = L.marker([location.lat, location.lng]).addTo(mymap);
//you can even add a custom popup for the individual marker
//marker.bindPopup("custom pop up content goes here").openPopup();
}
}