Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API V3，带有图标类型和选择功能

Javascript 谷歌地图API V3，带有图标类型和选择功能

javascript xml google-maps-api-3

Javascript 谷歌地图API V3，带有图标类型和选择功能,javascript,xml,google-maps-api-3,google-maps-markers,Javascript,Xml,Google Maps Api 3,Google Maps Markers,我正在将我的Google API v2映射迁移到版本3 我已经成功地完成了部分工作-见下文 <!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" xmlns:v="urn:schemas-microsoft-com:vm

我正在将我的Google API v2映射迁移到版本3

我已经成功地完成了部分工作-见下文

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; } 
</style>
<script type="text/javascript"> 
//<![CDATA[
  // this variable will collect the html which will eventually be placed in the select 
  var select_html = ""; 

  // arrays to hold copies of the markers
  // because the function closure trick doesnt work there 
  var gmarkers = []; 

 // global "map" variable
  var map = null;




var image = {
url: 'ghd.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(59, 70),
// The origin for this image is 0,0.
origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
anchor: new google.maps.Point(0, 70)
};
var shadow = {
url: 'images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
size: new google.maps.Size(37, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML &lt;area&gt; element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
  coord: [1, 1, 1, 20, 18, 20, 18 , 1],
  type: 'poly'
};



// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
     shadow: shadow,
    icon: image,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });

    // ======= Add the entry to the select box =====
    select_html += '<option> ' + name + '<\/option>';
    // ==========================================================
// save the info we need to use later
gmarkers.push(marker);
return marker;
}

  // ======= This function handles selections from the select box ====
  // === If the dummy entry is selected, the info window is closed ==
  function handleSelected(opt) {
    var i = opt.selectedIndex - 1; 
    if (i > -1) {
      google.maps.event.trigger(gmarkers[i],"click");
    }
    else {
      infowindow.close();
    }
  }

function initialize() {
// create the map
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(32.8624,-96.654218),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);

google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

  // Read the data from 100.xml
  downloadUrl("MW_100.xml", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");

    // ==== first part of the select box ===
    select_html = '<select onChange="handleSelected(this)">' +
                    '<option selected> - Select a location - <\/option>';
    // =====================================

    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var html = markers[i].getAttribute("html");
      var label = markers[i].getAttribute("label");

      // create the marker
      var marker = createMarker(point,label,html);
    }
    // ===== final part of the select box =====
    select_html += '<\/select>';
    document.getElementById("selection").innerHTML = select_html;
  });}

var infowindow = new google.maps.InfoWindow(
{ size: new google.maps.Size(150,50)});


// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/   
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm 
//]]>
</script> 

</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 

<!-- you can use tables or divs for the overall layout --> 
       <div id="map_canvas" style="width: 700px; height: 450px"></div> 
<!-- ====== this div will hold the select box ==== -->
<div id="selection"></div>
<!-- ============================================= -->

<noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
  However, it seems JavaScript is either disabled or not supported by your browser. 
  To view Google Maps, enable JavaScript by changing your browser options, and then 
  try again.</p>
</noscript> 

</body> 
</html> 


GoogleMapsJavaScriptAPI v3示例：从XML加载数据
html，正文{高度：100%；}
// -1) {
google.maps.event.trigger（gmarkers[i]，“点击”）；
}
否则{
infowindow.close（）；
}
}
函数初始化（）{
//创建地图
变量myOptions={
缩放：2，
中心：新google.maps.LatLng（32.8624，-96.654218），
mapTypeControl:true，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
导航控制：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
//从100.xml读取数据
下载URL（“MW_100.xml”，函数（doc）{
var xmlDoc=xmlParse（doc）；
var markers=xmlDoc.documentElement.getElementsByTagName（“标记”）；
//==选择框的第一部分===
选择_html=''+
“-选择一个位置-”；
// =====================================
对于（var i=0；i
必须启用JavaScript才能使用Google地图。
但是，您的浏览器似乎禁用或不支持JavaScript。
要查看Google地图，请通过更改浏览器选项启用JavaScript，然后
再试一次
然而，我想为图标引入不同的类型，并将图标类型的子分类作为xml数据中的一个字段。所以我试着将代码调整为以下内容，但并没有输出。Html/js如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtm
/DTD/xhtml1-    strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps Javascript API v3 Example: Loading the data from an XML</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; } 
</style>
<script type="text/javascript"> 
//<![CDATA[
  // this variable will collect the html which will eventually be placed in the select 
  var select_html = ""; 

  // arrays to hold copies of the markers
  // because the function closure trick doesnt work there 
  var gmarkers = []; 

   var gicons = [];

    var icon = new GIcon();
icon.iconSize = new GSize(46, 44);
  icon.iconAnchor = new GPoint(23, 44);
  icon.infoWindowAnchor = new GPoint(23, 7);

  icon.shadowSize = new GSize(22, 20);
  icon.shadowAnchor = new GPoint(100, 60);



  gicons["yellow"] = new GIcon(icon, "ghd_grey.png");
   gicons["grey"] = new GIcon(icon, "ghd2.png");


 // global "map" variable
  var map = null;
// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html, icontype) {
var contentString = html;
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    gicons:icontype,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });

    // ======= Add the entry to the select box =====
    select_html += '<option> ' + name + '<\/option>';
    // ==========================================================
// save the info we need to use later
gmarkers.push(marker);
return marker;
}

  // ======= This function handles selections from the select box ====
  // === If the dummy entry is selected, the info window is closed ==
  function handleSelected(opt) {
    var i = opt.selectedIndex - 1; 
    if (i > -1) {
      google.maps.event.trigger(gmarkers[i],"click");
    }
    else {
      infowindow.close();
    }
  }

function initialize() {
// create the map
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787,-79.359741),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);

google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

  // Read the data from 100.xml
  downloadUrl("MW_100.xml", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");

    // ==== first part of the select box ===
    select_html = '<select onChange="handleSelected(this)">' +
                    '<option selected> - Select a location - <\/option>';
    // =====================================

    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var html = markers[i].getAttribute("html");
      var label = markers[i].getAttribute("label");
  var icontype = markers[i].getAttribute("icontype");
      // create the marker
      var marker = createMarker(point,label,html,icontype);
    }
    // ===== final part of the select box =====
    select_html += '<\/select>';
    document.getElementById("selection").innerHTML = select_html;
  });
}

var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)
});


// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/   
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm 
//]]>
</script> 

</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 

<!-- you can use tables or divs for the overall layout --> 
       <div id="map_canvas" style="width: 550px; height: 450px"></div> 
<!-- ====== this div will hold the select box ==== -->
<div id="selection"></div>
<!-- ============================================= -->

<noscript><p><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
  However, it seems JavaScript is either disabled or not supported by your browser. 
  To view Google Maps, enable JavaScript by changing your browser options, and then 
  try again.</p>
</noscript> 


</body> 
</html> 


GoogleMapsJavaScriptAPI v3示例：从XML加载数据
html，正文{高度：100%；}
// -1) {
google.maps.event.trigger（gmarkers[i]，“点击”）；
}
否则{
infowindow.close（）；
}
}
函数初始化（）{
//创建地图
变量myOptions={
缩放：8，
中心：新google.maps.LatLng（43.907787，-79.359741），
mapTypeControl:true，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
导航控制：对，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
//从100.xml读取数据
下载URL（“MW_100.xml”，函数（doc）{
var xmlDoc=xmlParse（doc）；
var markers=xmlDoc.documentElement.getElementsByTagName（“标记”）；
//==选择框的第一部分===
选择_html=''+
“-选择一个位置-”；
// =====================================
对于（var i=0；i
必须启用JavaScript才能使用Google地图。
但是，您的浏览器似乎禁用或不支持JavaScript。
要查看Google地图，请通过更改浏览器选项启用JavaScript，然后
再试一次
示例xml： label=“Marker 2”icontype=“黄色”/> 您只需要

var gicons=[]；
gicons['yellow']=“ghd_grey.png”；
gicons[“灰色”]=“ghd2.png”；
...
在
createMarker
中：

var marker=new google.maps.marker({
位置：latlng，
地图：地图，
图标：gicons[图标类型]，
...
优化：false，//重要，否则zIndex可能无法工作
zIndex:10//google.maps.Marker.MAX_zIndex降到0。
//使用marker.setZIndex（）动态设置它
...
});
谢谢，效果很好。我的最后一个问题是我想把我的记号笔叠起来，放在最前面。我尝试了以下方法，将字段添加到xml中，但似乎对堆叠顺序没有影响。我加上：var zIndex=“”；函数createMarker（latlng，name，html，icontype，zIndex）{var contentString=html；var marker=new google.maps.marker（{position:latlng，map:map，icon:gicons[icontype]，shadow:shado