| Autor | Zpráva | ||
|---|---|---|---|
| juraj Profil |
#1 · Zasláno: 25. 5. 2017, 00:45:10
Zdravím
ako mám upraviť kód, aby sa funkcia makeMarker generovala z mysql,kde by boli uložené hodnoty ako name,latitude,lobgitude Dakujem za rady <style>
#map{width:512px; height:512px; margin:10px;}
#sidebar{float:left; margin:10px;}
.sb_blue button {text-align: left;
cursor:pointer;
background-color: #99b3cc;
font-family: Verdana;
margin: 1px;}
.sb_blue button:focus {background-color: #eee;}
.sb_blue button:hover {background-color: #fff;}
</style>
<script src="http://maps.google.com/maps/api/js?key= &sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="sidebar" class="sb_blue"></div>
<div id="map"></div>
<a href="makemarker_sidebar.htm">Back</a>
<script>
/**
* map
*/
var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map"), mapOpts);
// We set zoom and center later by fitBounds()
/**
* makeMarker() ver 0.2
* creates Marker and InfoWindow on a Map() named 'map'
* creates sidebar row in a DIV 'sidebar'
* saves marker to markerArray and markerBounds
* @param options object for Marker, InfoWindow and SidebarItem
* @author Esa 2009
*/
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
function makeMarker(options){
var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, "mouseover", function(){
infoWindow.setOptions(options);
infoWindow.open(map, pushPin);
if(this.sidebarButton)this.sidebarButton.button.focus();
});
var idleIcon = pushPin.getIcon();
if(options.sidebarItem){
pushPin.sidebarButton = new SidebarItem(pushPin, options);
pushPin.sidebarButton.addIn("sidebar");
}
markerBounds.extend(options.position);
markerArray.push(pushPin);
return pushPin;
}
google.maps.event.addListener(map, "click", function(){
infoWindow.close();
});
/**
* Creates an sidebar item
* @constructor
* @author Esa 2009
* @param marker
* @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth,
*/
function SidebarItem(marker, opts){
var tag = opts.sidebarItemType || "button";
var row = document.createElement(tag);
row.innerHTML = opts.sidebarItem;
row.className = opts.sidebarItemClassName || "sidebar_item";
row.style.display = "block";
row.style.width = opts.sidebarItemWidth || "120px";
row.onclick = function(){
google.maps.event.trigger(marker, 'click');
}
row.onmouseover = function(){
google.maps.event.trigger(marker, 'mouseover');
}
row.onmouseout = function(){
google.maps.event.trigger(marker, 'mouseout');
}
this.button = row;
}
// adds a sidebar item to a <div>
SidebarItem.prototype.addIn = function(block){
if(block && block.nodeType == 1)this.div = block;
else
this.div = document.getElementById(block)
|| document.getElementById("sidebar")
|| document.getElementsByTagName("body")[0];
this.div.appendChild(this.button);
}
// deletes a sidebar item
SidebarItem.prototype.remove = function(){
if(!this.div) return false;
this.div.removeChild(this.button);
return true;
}
/**
* markers and info window contents
*/
makeMarker({
position: new google.maps.LatLng(60.28527,24.84864),
title: "Vantaankoski",
sidebarItem: "Vantaankoski",
content: "Vantaankoski"
});
makeMarker({
position: new google.maps.LatLng(60.27805,24.85281),
title: "Martinlaakso",
sidebarItem: "Martinlaakso",
content: "Martinlaakso"
});
makeMarker({
position: new google.maps.LatLng(60.27049,24.85366),
title: "Louhela",
sidebarItem: "Louhela",
content: "Louhela"
});
makeMarker({
position: new google.maps.LatLng(60.26139,24.85478),
title: "Myyrmäki",
sidebarItem: "Myyrmäki",
content: "Myyrmäki"
});
makeMarker({
position: new google.maps.LatLng(60.24929,24.86128),
title: "Malminkartano",
sidebarItem: "Malminkartano",
content: "Malminkartano"
});
makeMarker({
position: new google.maps.LatLng(60.23963,24.87694),
title: "Kannelmäki",
sidebarItem: "Kannelmäki",
content: "Kannelmäki"
});
makeMarker({
position: new google.maps.LatLng(60.23031,24.88353),
title: "Pohjois-Haaga",
sidebarItem: "Pohjois<br>Haaga",
content: "Pohjois-Haaga"
});
makeMarker({
position: new google.maps.LatLng(60.21831,24.89354),
title: "Huopalahti",
sidebarItem: "Huopalahti",
content: "Huopalahti"
});
makeMarker({
position: new google.maps.LatLng(60.20803,24.92039),
title: "Ilmala",
sidebarItem: "Ilmala",
content: "Ilmala"
});
makeMarker({
position: new google.maps.LatLng(60.19899,24.93269),
title: "Pasila",
sidebarItem: "Pasila",
content: "Pasila"
});
makeMarker({
position: new google.maps.LatLng(60.17295,24.93981),
title: "Helsinki",
sidebarItem: "Helsinki",
content: "Helsinki"
});
/**
* fit viewport to markers
*/
map.fitBounds(markerBounds);
</script> |
||
|
Časová prodleva: 6 let
|
|||
0