1. 首页
  2. 问答
  3. kml多边形和标记在一起

kml多边形和标记在一起

2013-03-09 111 views
0

我已经用我的多边形（kml文件）设置了地图api v3，但现在我想将这些标记放在同一个地图上。标记（lat，lang）直接来自MySQL数据库。kml多边形和标记在一起

这里是我的网页的代码：

<? 
require("markers/dbcon.php"); 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <link rel="stylesheet" type="text/css" href="css2.css" media="screen" /> 
    <title>StanOnline</title> 

<style type="text/css"> 
    html, body, #map_canvas { 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
    } 
.infowindow * {font-size: 90%; margin: 0} 
</style> 

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 
    </script> 
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"> 
    </script> 
    <script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js"> 
    </script> 
    <script language="JavaScript"> 
<!--Show/Hide div dmenu--> 
function toggle(id) { 
    var state = document.getElementById(id).style.display; 
     if (state == 'block') { 
      document.getElementById(id).style.display = 'block'; 
     } else { 
      document.getElementById(id).style.display = 'none'; 
     } 
    } 
</script> 


    <script type="text/javascript"> 

    var geoXml = null; 
    var geoXmlDoc = null; 
    var map = null; 
    var myLatLng = null; 
    var myGeoXml3Zoom = true; 
    var sidebarHtml = ""; 
    var infowindow = null; 
    var kmlLayer = null; 
    var preserveViewport = true; 
    var filename = "http://mini.hr/stanonline/mo_bck.kml"; 
    var icon = new   google.maps.MarkerImage("http://localhost/projekt/7stanonline/img/punkt.gif", 
    new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
    new google.maps.Point(16, 32)); 
    var currentPopup; 

    function addMarker(lat, lng, info) { 
var pt = new google.maps.LatLng(lat, lng); 
bounds.extend(pt); 
var marker = new google.maps.Marker({ 
    position: pt, 
    icon: icon, 
map: map 
}); 
    var popup = new google.maps.InfoWindow({ 
    content: info, 
    maxWidth: 200 
    }); 
    google.maps.event.addListener(marker, "click", function() { 
    if (currentPopup != null) { 
    currentPopup.close(); 
    currentPopup = null; 
    } 
    popup.open(map, marker); 
    currentPopup = popup; 
    }); 
    google.maps.event.addListener(popup, "closeclick", function() { 
    map.panTo(center); 
    currentPopup = null; 
    }); 
    } 


    function MapTypeId2UrlValue(maptype) { 
     var urlValue = 'm'; 
    switch(maptype){ 
    case google.maps.MapTypeId.HYBRID: urlValue='h'; 
        break; 
    case google.maps.MapTypeId.SATELLITE: urlValue='k'; 
        break; 
    case google.maps.MapTypeId.TERRAIN: urlValue='t'; 
        break; 
    default: 
    case google.maps.MapTypeId.ROADMAP: urlValue='m'; 
        break; 
} 
return urlValue; 
} 


function initialize() { 
    myLatLng = new google.maps.LatLng(45.345537,14.439621); 
    // these set the initial center, zoom and maptype for the map 
    // if it is not specified in the query string 
    var lat = 45.345537; 
    var lng = 14.439621; 
    var zoom = 13; 
    var maptype = google.maps.MapTypeId.ROADMAP; 




    // If there are any parameters at eh end of the URL, they will be in location.search 
    // looking something like "?marker=3" 

    // skip the first character, we are not interested in the "?" 
    var query = location.search.substring(1); 

    // split the rest at each "&" character to give a list of "argname=value" pairs 
    var pairs = query.split("&"); 
    for (var i=0; i<pairs.length; i++) { 
    // break each pair at the first "=" to obtain the argname and value 
var pos = pairs[i].indexOf("="); 
var argname = pairs[i].substring(0,pos).toLowerCase(); 
var value = pairs[i].substring(pos+1).toLowerCase(); 

    // process each possible argname - use unescape() if theres any chance of spaces 
    if (argname == "id") {id = unescape(value);} 
    if (argname == "filename") {filename = unescape(value);} 

    if (argname == "lat") {lat = parseFloat(value);} 
    if (argname == "lng") {lng = parseFloat(value);} 
    if (argname == "zoom") { 
    zoom = parseInt(value); 
    myGeoXml3Zoom = false; 
} 
    if (argname == "type") { 
// from the v3 documentation 8/24/2010 
// HYBRID This map type displays a transparent layer of major streets on satellite images. 
// ROADMAP This map type displays a normal street map. 
// SATELLITE This map type displays satellite images. 
// TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
     if (value == "m") {maptype = google.maps.MapTypeId.ROADMAP;} 
     if (value == "k") {maptype = google.maps.MapTypeId.SATELLITE;} 
     if (value == "h") {maptype = google.maps.MapTypeId.HYBRID;} 
     if (value == "t") {maptype = google.maps.MapTypeId.TERRAIN;} 

    } 
    } 
    if (!isNaN(lat) && !isNaN(lng)) { 
    myLatLng = new google.maps.LatLng(lat, lng); 
    } 
      var myOptions = { 
       zoom: zoom, 
       center: myLatLng, 
       // zoom: 5, 
       // center: myLatlng, 
       mapTypeId: maptype 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), 
        myOptions); 
      infowindow = new google.maps.InfoWindow({}); 

geoXml = new geoXML3.parser({ 
       map: map, 
       infoWindow: infowindow, 
       singleInfoWindow: true, 
     zoom: myGeoXml3Zoom, 

       afterParse: useTheData 
      }); 

      geoXml.parse(filename); 
    google.maps.event.addListener(map, "bounds_changed", makeSidebar); 
    google.maps.event.addListener(map, "center_changed", makeSidebar); 
    google.maps.event.addListener(map, "zoom_changed", makeSidebar); 
    // Make the link the first time when the page opens 
    makeLink(); 

    // Make the link again whenever the map changes 
    google.maps.event.addListener(map, 'maptypeid_changed', makeLink); 
    google.maps.event.addListener(map, 'center_changed', makeLink); 
    google.maps.event.addListener(map, 'bounds_changed', makeLink); 
    google.maps.event.addListener(map, 'zoom_changed', makeLink); 
    <? 
$query = mysql_query("SELECT * FROM poi_example"); 
while ($row = mysql_fetch_array($query)){ 
$name=$row['name']; 
$lat=$row['lat']; 
$lon=$row['lon']; 
$desc=$row['desc']; 
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n"); 
} 
?> 
center = bounds.getCenter(); 
    }; 

function kmlPgClick(pm) { 
if (geoXml.docs[0].placemarks[pm].polygon.getMap()) { 
    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon,"click"); 
} else { 
    geoXmlDoc.placemarks[pm].polygon.setMap(map); 
    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polygon,"click"); 
} 
} 
function kmlPlClick(pm) { 
if (geoXml.docs[0].placemarks[pm].polyline.getMap()) { 
    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline,"click"); 
} else { 
    geoXmlDoc.placemarks[pm].polyline.setMap(map); 
    google.maps.event.trigger(geoXmlDoc.placemarks[pm].polyline,"click"); 
    } 
} 

function kmlShowPlacemark(pm) { 
if (geoXmlDoc.placemarks[pm].polygon) { 
map.fitBounds(geoXmlDoc.placemarks[pm].polygon.bounds); 

} else if (geoXmlDoc.placemarks[pm].polyline) { 
map.fitBounds(geoXmlDoc.placemarks[pm].polyline.bounds); 
} 


for (var i=0;i<geoXmlDoc.placemarks.length;i++) { 
var placemark = geoXmlDoc.placemarks[i]; 
if (i == pm) { 
    if (placemark.polygon) placemark.polygon.setMap(null); 
    if (placemark.polyline) placemark.polyline.setMap(map); 

} else { 
    if (placemark.polygon) placemark.polygon.setMap(map); 
    if (placemark.polyline) placemark.polyline.setMap(null); 
    } 
} 
} 

function kmlColor (kmlIn) { 
    var kmlColor = {}; 
if (kmlIn) { 
aa = kmlIn.substr(0,2); 
bb = kmlIn.substr(2,2); 
gg = kmlIn.substr(4,2); 
rr = kmlIn.substr(6,2); 
kmlColor.color = "#" + rr + gg + bb; 
kmlColor.opacity = parseInt(aa,16)/256; 
} else { 
// defaults 
kmlColor.color = randomColor(); 
kmlColor.opacity = 0.45; 
} 
return kmlColor; 
} 

function randomColor(){ 
var color="#"; 
var colorNum = Math.random()*8388607.0; // 8388607 = Math.pow(2,23)-1 
var colorStr = colorNum.toString(16); 
color += colorStr.substring(0,colorStr.indexOf('.')); 
return color; 
}; 

var highlightOptions = {fillColor: "#b9b8a2", strokeColor: "#000000", fillOpacity: 0.4, strokeWidth: 10}; 
var highlightLineOptions = {strokeColor: "#000000", strokeWidth: 80}; 
function kmlHighlightPoly(pm) { 
    for (var i=0;i<geoXmlDoc.placemarks.length;i++) { 
var placemark = geoXmlDoc.placemarks[i]; 
if (i == pm) { 
    if (placemark.polygon) placemark.polygon.setOptions(highlightOptions); 
    if (placemark.polyline) placemark.polyline.setOptions(highlightLineOptions); 
} else { 
    if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle); 
    if (placemark.polyline)  placemark.polyline.setOptions(placemark.polyline.normalStyle); 
} 
} 
} 
function kmlUnHighlightPoly(pm) { 
    for (var i=0;i<geoXmlDoc.placemarks.length;i++) { 
    if (i == pm) { 
    var placemark = geoXmlDoc.placemarks[i]; 
    if (placemark.polygon) placemark.polygon.setOptions(placemark.polygon.normalStyle); 
    if (placemark.polyline)  placemark.polyline.setOptions(placemark.polyline.normalStyle); 
    } 
} 
} 


function showAll() { 
map.fitBounds(geoXmlDoc.bounds); //show all bounds 
map.setZoom(13); 
for (var i=0;i<geoXmlDoc.placemarks.length;i++) { 
var placemark = geoXmlDoc.placemarks[i]; 
if (placemark.polygon) placemark.polygon.setMap(map); 
if (placemark.polyline) placemark.polyline.setMap(map); 

} 
} 

function highlightPoly(poly, polynum) { 
// poly.setOptions({fillColor: "#0000FF", strokeColor: "#0000FF", fillOpacity: 0.3}) ; 
google.maps.event.addListener(poly,"mouseover",function() { 
var rowElem = document.getElementById('row'+polynum); 
if (rowElem) rowElem.style.backgroundColor = "#b9b8a2"; //ovo je boja u sidebar-u 
if (poly instanceof google.maps.Polygon) { 
    poly.setOptions(highlightOptions); 
} else if (poly instanceof google.maps.Polyline) { 
    poly.setOptions(highlightLineOptions); 
} 
}); 
google.maps.event.addListener(poly,"mouseout",function() { 
var rowElem = document.getElementById('row'+polynum); 
if (rowElem) rowElem.style.backgroundColor = ""; //pozadina nakon mouserover-a u sidebar-u 
poly.setOptions(poly.normalStyle); 
}); 
} 

// == rebuilds the sidebar to match the markers currently displayed == 
function makeSidebarPolygonEntry(i) { 
var name = geoXmlDoc.placemarks[i].name; 
if (!name || (name.length == 0)) name = "polygon #"+i; 
// alert(name); 
sidebarHtml += '<tr id="row'+i+'"><td onmouseover="kmlHighlightPoly('+i+');"onmouseout="kmlUnHighlightPoly('+i+');"><a href="javascript:kmlPgClick('+i+');">'+name+'</a> - <a  href="javascript:kmlShowPlacemark('+i+');">odaberi</a></td></tr>'; 

} 
function makeSidebarPolylineEntry(i) { 
var name = geoXmlDoc.placemarks[i].name; 
if (!name || (name.length == 0)) name = "polyline #"+i; 
// alert(name); 
sidebarHtml += '<tr id="row'+i+'"><td onmouseover="kmlHighlightPoly('+i+');"  onmouseout="kmlUnHighlightPoly('+i+');"><a href="javascript:kmlPlClick('+i+');">'+name+'</a> - <a href="javascript:kmlShowPlacemark('+i+');">show</a></td></tr>'; 

} 


function makeSidebar() { 
sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Prika&#382i sve kvartove</a></td></tr>'; 
var currentBounds = map.getBounds(); 
// if bounds not yet available, just use the empty bounds object; 
if (!currentBounds) currentBounds=new google.maps.LatLngBounds(); 
if (geoXmlDoc) { 
for (var i=0; i<geoXmlDoc.placemarks.length; i++) { 
if (geoXmlDoc.placemarks[i].polygon) { 
    if (currentBounds.intersects(geoXmlDoc.placemarks[i].polygon.bounds)) { 
    makeSidebarPolygonEntry(i); 
    } 
    } 
    if (geoXmlDoc.placemarks[i].polyline) { 
    if (currentBounds.intersects(geoXmlDoc.placemarks[i].polyline.bounds)) { 
    makeSidebarPolylineEntry(i); 
    } 
    } 

} 
} 
sidebarHtml += "</table>"; 
    document.getElementById("sidebar").innerHTML = sidebarHtml; 
} 

function useTheData(doc){ 
var currentBounds = map.getBounds(); 
if (!currentBounds) currentBounds=new google.maps.LatLngBounds(); 
// Geodata handling goes here, using JSON properties of the doc object 
sidebarHtml = '<table><tr><td><a href="javascript:showAll();">Show All</a></td></tr>'; 
// var sidebarHtml = '<table>'; 
geoXmlDoc = doc[0]; 
for (var i = 0; i < geoXmlDoc.placemarks.length; i++) { 
// console.log(doc[0].markers[i].title); 
var placemark = geoXmlDoc.placemarks[i]; 
if (placemark.polygon) { 
    if (currentBounds.intersects(placemark.polygon.bounds)) { 
    makeSidebarPolygonEntry(i); 
    } 
    var kmlStrokeColor = kmlColor(placemark.style.color); 
    var kmlFillColor = kmlColor(placemark.style.fillcolor); 
    var normalStyle = { 
     strokeColor: kmlStrokeColor.color, 
     strokeWeight: placemark.style.width, 
     strokeOpacity: kmlStrokeColor.opacity, 
     fillColor: kmlFillColor.color, 
     fillOpacity: kmlFillColor.opacity 
     }; 
    placemark.polygon.normalStyle = normalStyle; 

    highlightPoly(placemark.polygon, i); 
} 
if (placemark.polyline) { 
    if (currentBounds.intersects(placemark.polyline.bounds)) { 
    makeSidebarPolylineEntry(i); 
    } 
    var kmlStrokeColor = kmlColor(placemark.style.color); 
    var normalStyle = { 
     strokeColor: kmlStrokeColor.color, 
     strokeWeight: placemark.style.width, 
     strokeOpacity: kmlStrokeColor.opacity 
     }; 
    placemark.polyline.normalStyle = normalStyle; 

    highlightPoly(placemark.polyline, i); 
} 


/* doc[0].markers[i].setVisible(false); */ 
} 
sidebarHtml += "</table>"; 
document.getElementById("sidebar").innerHTML = sidebarHtml; 
}; 


function hide_kml(){ 

     geoXml.hideDocument(); 

} 

function unhide_kml(){ 

     geoXml.showDocument(); 

} 
function reload_kml(){ 
geoXml.hideDocument(); 
delete geoXml; 
geoXml = new geoXML3.parser({ 
       map: map, 
       singleInfoWindow: true, 
       afterParse: useTheData, 
       preserveViewport: true 
}); 
geoXml.parse(filename); 

} 


function hide_polys_kml(){ 
for (var i=0;i<geoXmlDoc.gpolylines.length;i++) { 
    geoXmlDoc.gpolylines[i].setMap(null); 
} 
} 

function unhide_polys_kml(){ 
for (var i=0;i<geoXmlDoc.gpolylines.length;i++) { 
    geoXmlDoc.gpolylines[i].setMap(map); 
    } 
} 
function load_kmlLayer() { 
kmlLayer = new google.maps.KmlLayer(filename); 
google.maps.event.addListener(kmlLayer, "status_changed", function() { 
    document.getElementById('kmlstatus').innerHTML = "Kml Status:"+kmlLayer.getStatus(); 
}); 
kmlLayer.setMap(map); 
} 
function hide_kmlLayer() { 
kmlLayer.setMap(null); 
} 
function show_kmlLayer() { 
kmlLayer.setMap(map); 
} 

    </script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 

    <div id="dmenu"> 
     <div id="hidden"><a href="javascript:;" onclick="toggle('dmenu');"> <img src="img/x.png"></a></div> 
     <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ODABERI KVART: 
      <div id="sidebar"> 
    </div> 
     </div> 
      </div> 
</body> 
</html>

我加入这个代码功能初始化（）

<? 
$query = mysql_query("SELECT * FROM poi_example"); 
while ($row = mysql_fetch_array($query)){ 
$name=$row['name']; 
$lat=$row['lat']; 
$lon=$row['lon']; 
$desc=$row['desc']; 
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n"); 
} 
?> 
center = bounds.getCenter();

而增加的功能addMarker，你可以看到在上面的代码

代码中的错误或缺失的地方在哪里？

来源

2013-03-09 scooterfreek

+0

什么是生成的HTML看起来像（查看在浏览器中源）？你有任何的JavaScript错误？ – geocodezip 2013-03-09 16:43:35

+0

可以将多边形和标记与脚本一起放在相同的api中？ – scooterfreek 2013-03-12 08:41:09

回答

0

当然可以在同一张地图上有多边形和标记。

  1. 你不应该添加你生成的HTML作为你的问题的“答案”，你应该编辑你的问题来添加它。
  2. 你有JavaScript错误
    • 没有功能makeLink
    • 边界没有定义。
  3. 你的addMarkers函数没有定义图标。

的KML好：

http://www.geocodezip.com/geoxml3_test/v3_geoxml3_kmltest_linktoB.html?filename=http://www.geocodezip.com/geoxml3_test/mini_hr_stanonline_mo_bck.kml

解决了那些errors makes it work for me

来源

2013-03-12 13:26:22 geocodezip

+0

对不起，我的答案永远不会做同样的事情。在你的链接中，我只在地图上获得标记，没有加载kml。 – scooterfreek 2013-03-12 14:06:54

+0

你使用什么浏览器？我在Chrome中进行了测试。 – geocodezip 2013-03-12 14:08:51

+0

IE，现在会在Chrome中尝试...它在Chrome中工作，但现在我不在我的电脑上，所以会尝试删除此js错误来修复它。所以当我回家后会给你反馈 – scooterfreek 2013-03-12 14:14:42

相关问题

 相关问题