0
我正在使用leafletjs來顯示地圖並在其上放置一些標記。我一直被困在一個奇怪的問題，其中一些標記彈出窗口不顯示。在玩它時，我發現，當我從谷歌地圖取得虛擬緯向數據時，它確實會觸發，但不是我從我的數據中獲得的經緯度。但是在這兩種情況下，我都會在地圖上貼上標記。因此，如果經緯度有問題，我如何在地圖上正確標記它們？ 彈出火災時，我有這樣的經緯度：bindpopup不會觸發leafletjs的標記
lat: "1.478744"
long: "-0.295573"
，它不會火這樣的：
lat: "51.483679748651"
long: "-0.29162660006234"
這是我的代碼：
<html style='height: 100%; width: 100%;'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="src/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="src/L.Control.Sidebar.css" />
<style>
body {
padding: 30px;
font-family: sans-serif;
}
@font-face { font-family: Roboto-Medium; src: url('fonts/Roboto-Medium.ttf'); }
@font-face { font-family: Roboto-Regular; src: url('fonts/Roboto-Regular.ttf'); }
#map {
width: 100%;
height: 600px;
border-radius: 10px;
}
#sidebar {
padding: 24px;
height: auto;
width: auto;
float: right;
font-family: monospace;
}
hr { width:100%; height:1px; background: #fff }
.popLabelTitle {
color: #000000;
font-family: Roboto-Regular;
font-size: 20
}
.popLabelSubTitle {
color: #505050;
font-family: Roboto-Regular;
font-size: 14
}
.popLabelBlurred {
color: #505050;
font-family: Roboto-Medium;
font-size: 14
}
.radioTitle {
color: #505050;
font-family: Roboto-Regular;
font-size: 14
}
</style>
</head>
<body>
<div id="sidebar">
<span style="font-family: Roboto-Regular;">Filter</span><br>
<input backgroundColor="red" type="radio" name="filter" value="schedule" > <label class="radioTitle" >Schedule</label> <br>
<input type="radio" name="filter" value="risk"> <label class="radioTitle" >Risk</label> <br>
<input type="radio" name="filter" value="opm"> <label class="radioTitle" >OPM</label> <br>
<input type="radio" name="filter" value="location"> <label class="radioTitle" >Location</label> <br>
<input type="radio" name="filter" value="all" checked> <label class="radioTitle" >All</label> <br>
</div>
<div id="map"></div>
<script src="leaflet.js"></script>
<script src="src/L.Control.Sidebar.js"></script>
<script>
$(document).ready(function() {
$('input[type="radio"]').change(function(){
//alert(this.value);
});
});
var map;
var poiData = [{
"id" : "15555",
"color": "blue",
"address" : "5 Rue de l'Arcade, 11400 Castelnaudary, France",
"description" : "",
"lat" : "51.47344681882283",
"lon" : "-0.3091066283535285",
"name" : "Le Petit Gazouilli",
"zoom_show" : "2"
},{
"id" : "142065",
"color": "green",
"address" : "5 Rue de l'Arcade, 11400 Castelnaudary, France",
"description" : "",
"lat" : "51.483679748651",
"lon" : "-0.29162660006234",
"name" : "Le Petit ",
"zoom_show" : "2"
}];
window.onresize = function() {
Ti.API.info('********** RESIZE FUNCTION IS CALLED1!!!!! window.innerHeight' + window.innerHeight + ' //// document.body.clientHeight = ' + document.body.clientHeight);
// outputs window.innerheight =
document.getElementById("map").style.height = window.innerHeight + 'px';
// maybe change this to html/body tag to let it be a more generic fix.
map.invalidateSize();
// relevant to your leaflet map to trigger resizing/redrawing /filling.
};
var path = "",
obj = "",
center = "",
bounds = "",
minZoomLevel = "",
maxZoomLevel = "";
/*
Ti.App.addEventListener("app:startWebview", function(e) {
obj = JSON.parse(e.pois);
center = JSON.parse(e.center);
minZoomLevel = JSON.parse(e.minZoomLevel);
maxZoomLevel = JSON.parse(e.maxZoomLevel);
bounds = JSON.parse(e.bounds);
createMap();
});*/
obj = poiData;
center = [51.478744, -0.295573];
minZoomLevel = 16;
maxZoomLevel = 18;
//bounds = [[51.470103, -0.310407], [51.478376, -0.280567]];
bounds = [[51.470103, -0.310407], [51.486674, -0.286572]]; //sw,ne
createMap();
function createMap() {
//alert('2s');
var points = obj;
map = L.map('map', {
//center : [51.47834563230677, -0.29832356080899747],
//layers: [tileLayer['Gray'], groupA, groupB],
center : center,
zoom : minZoomLevel,
zoomControl : true
});
var tl = L.tileLayer('mapTiles/richmond/{z}_{x}_{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
minZoom : minZoomLevel,
maxZoom : maxZoomLevel,
bounds : bounds,
//maxNativeZoom : 14,
unloadInvisibleTiles : true,
id : 'mapbox.streets'
}).addTo(map);
map.setMaxBounds(bounds);
var sidebar = L.control.sidebar('sidebar', {
closeButton: false,
position: 'right'
});
map.addControl(sidebar);
sidebar.show();
setTimeout(function() {
sidebar.show();
}, 500);
tl.on("load",function() {
//alert("all visible tiles have been loaded");
});
var poiLayer,
indicatorMarker;
function onClick(e) {
alert('clicked a poi! ');
//Ti.API.info("click " + JSON.stringify(e.target.options.item));
// if (e && e.target && e.target.options && e.target.options.item) {
// alert('clicked a poi!');
// Ti.App.fireEvent("app:openPoi", {
// poiItem : JSON.stringify(e.target.options.item)
// });
// }
}
var zoomFactor = 0.8;
function addPois(zoom) {
var poiArray = [];
if (poiLayer) {
poiLayer.clearLayers();
}
for (var i = 0,j = points.length; i < j; i++) {
//alert('ss');
var item = points[i];
// if (showPoi(item, zoom)) {
// var w = 50;
//var h = 60;
var w = 28;
var h = 42;
if (currentZoom === 16) {
w = w * zoomFactor;
h = h * zoomFactor;
}
/*
var icon = "",
iconHtml = "";
if (item.recommended) {
icon = "rec_tapped_poi";
}
if (item.favourited) {
icon = "fav_tapped_poi";
}
if (icon) {
iconHtml = '<img style="width:15px;height:15px;position:absolute;left:50%;margin-left:-7px;top:-6px" src="images/' + icon + '.png">';
}
*/
var pinIcon = "";
if (item.color == "blue") {
pinIcon = "mapMarkerBlue";
}
if (item.color == "green") {
pinIcon = "mapMarkerGreen";
}
if (item.color == "purple") {
pinIcon = "mapMarkerPurple";
}
var myIcon = L.divIcon({
iconSize : [w, h],
iconAnchor : [(w/2), h],
className : "testclass",
html : '<img style="width:' + w + 'px;height:' + h + 'px" src="images/poi_icons/' + pinIcon + '.png">'
});
poiArray.push(L.marker([item.lat, item.lon], {
icon : myIcon,
item : item,
}).addTo(map).bindPopup(L.popup({offset:(0,1)}).setContent("<div><label class='popLabelTitle' >12345678</label></div>"
+ "<div><label class='popLabelSubTitle' >Last Inspected 1/1/11</label></div>"
+ "<hr /><div><label class='popLabelBlurred' >Dashboard</label></div>")));
};
poiLayer = L.layerGroup(poiArray);
poiLayer.addTo(map);
}
addPois(currentZoom);
//var currentZoom = 12;
var currentZoom = 16;
map.on('zoomend', function(e) {
var z = map.getZoom();
if (currentZoom != z) {
currentZoom = z;
// addPois(z);
}
});
Ti.App.addEventListener("app:addPoints", function(e) {
if (e.points) {
Ti.API.info(e.points);
points = e.points;
addPois(currentZoom);
}
});
}
</script>
</body>
你的問題下有一個編輯按鈕....你應該使用它。這不是一個答案。 – iH8