谷歌地图API V3与图标类型和选择功能
Google MAPS API V3 with icon types and select function
我正在将我的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 <area> 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>
无论如何，我想为图标引入不同的类型，并将图标类型的子分类作为 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>
示例 xml： 标签="标记 2" 图标类型="黄色"/>
你只需要
var gicons=[];
gicons['yellow'] ="ghd_grey.png";
gicons["grey"] = "ghd2.png";
...
在createMarker：
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon : gicons[icontype],
...
optimized: false, //important, else zIndex might not work
zIndex : 10 //google.maps.Marker.MAX_ZINDEX downto 0.
//use marker.setZIndex() to set it dynamically
...
});
相关文章：
- 每当您在选择器内移动鼠标时，悬停功能就会重复
- JavaScript/jQuery:获取选择功能在Firefox和Chrome中不起作用
- JavaScript选择功能
- 如何使用OpenLayers以编程方式选择功能
- 具有悬停延迟的 OpenLayers 选择功能控件
- 如何根据属性选择功能
- 如何在UI选择菜单中为每个选项指定选择功能
- 谷歌地图API V3与图标类型和选择功能
- D3js 从 geojson 中选择功能
- 具有时区选择功能的 AngularJS 日期选择器
- JQuery自动完成下拉选择功能
- 自定义选择功能，复制到剪贴板纯JS
- 用户选择功能
- 复选框快速选择功能不正常
- Jquery选择功能自动年龄的生日，而不是输入类型日期
- 在OpenLayers 3中选择功能时是否有事件
- HTML/JavaScript多项选择测验:设置标题和答案选择功能
- 如何使用 AngularJS/Ionic 中现有的章节选择功能
- 自动关闭选择功能
- Jquery自动完成选择功能
