google map api 如何修改图标的样式。 80
<html><head><metaname="viewport"content="initial-scale=1.0,user-scalable=no"/><metaht...
<html>
<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: Simple Controls</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="map1.js"></script>
<script type="text/javascript">
function initialize() {
var myLatlng2500= new google.maps.LatLng(22.5465,114.1226);
var myOptions = {
zoom: 50,
center: myLatlng2500,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker2500= new google.maps.Marker({ position: myLatlng2500, map: map});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
如上代码，我想将标记的图标修改成一个红叉或者红点，请问入如何才能做到？还有就是这个代码的“myOptions”和“google.maps.Marker”这两个方法是封装在哪个类中的？
对了，<script type="text/javascript" src="map1.js"></script>这一句 应该是
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 展开
<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: Simple Controls</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="map1.js"></script>
<script type="text/javascript">
function initialize() {
var myLatlng2500= new google.maps.LatLng(22.5465,114.1226);
var myOptions = {
zoom: 50,
center: myLatlng2500,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var marker2500= new google.maps.Marker({ position: myLatlng2500, map: map});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
如上代码，我想将标记的图标修改成一个红叉或者红点，请问入如何才能做到？还有就是这个代码的“myOptions”和“google.maps.Marker”这两个方法是封装在哪个类中的？
对了，<script type="text/javascript" src="map1.js"></script>这一句 应该是
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 展开
展开全部
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script>
<script type="text/javascript">
function load()
{
//检查浏览器的兼容性.
if (GBrowserIsCompatible())
{
//加载地图
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
google.maps.LabelMarker = function(latlng, options)
{
this.latlng = latlng;
this.labelText = options.labelText || '';
this.labelClass = options.labelClass || 'writeb';
this.labelOffset = options.labelOffset || new google.maps.Size(8, -33);
options.icon = options.icon || getTextIcon();
google.maps.Marker.apply(this, arguments);
}
google.maps.LabelMarker.prototype = new google.maps.Marker(new google.maps.LatLng(0, 0));
google.maps.LabelMarker.prototype.initialize = function(map)
{
google.maps.Marker.prototype.initialize.call(this, map);
var label = document.createElement('div');
label.className = this.labelClass;
label.innerHTML = this.labelText;
label.style.position = 'absolute';
label.style.width = '48px';
map.getPane(G_MAP_MARKER_PANE).appendChild(label);
this.map = map;
this.label = label;
}
google.maps.LabelMarker.prototype.redraw = function(force)
{
google.maps.Marker.prototype.redraw.call(this, map);
if(!force)
{
return;
}
var point = this.map.fromLatLngToDivPixel(this.latlng);
var z = google.maps.Overlay.getZIndex(this.latlng.lat());
this.label.style.left = (point.x + this.labelOffset.width) + 'px';
this.label.style.top = (point.y + this.labelOffset.height) + 'px';
this.label.style.zIndex = z + 1;
}
google.maps.LabelMarker.prototype.remove = function()
{
this.label.parentNode.removeChild(this.label);
this.label = null;
google.maps.Marker.prototype.remove.call(this);
}
var n= 21;//在这里接收要显示的信息，文字要用双引号""
function getTextIcon()
{
var icon = new google.maps.Icon();
icon.image = "blue.png";
//icon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
icon.iconSize = new GSize(37,37 );
icon.iconAnchor = new GPoint(0, 40);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
var marker = new google.maps.LabelMarker(map.getCenter(), { labelText:n});//在这加入n
map.addOverlay(marker);
}
}
</script>
</head>
<body onLoad="load()" onUnload="GUnload()">
<!-- 地图画板 -->
<div id="map_canvas" style="width:640px; height:480px"></div>
</body>
</html
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN" type="text/javascript"></script>
<script type="text/javascript">
function load()
{
//检查浏览器的兼容性.
if (GBrowserIsCompatible())
{
//加载地图
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.9493, 116.3975), 13);
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
google.maps.LabelMarker = function(latlng, options)
{
this.latlng = latlng;
this.labelText = options.labelText || '';
this.labelClass = options.labelClass || 'writeb';
this.labelOffset = options.labelOffset || new google.maps.Size(8, -33);
options.icon = options.icon || getTextIcon();
google.maps.Marker.apply(this, arguments);
}
google.maps.LabelMarker.prototype = new google.maps.Marker(new google.maps.LatLng(0, 0));
google.maps.LabelMarker.prototype.initialize = function(map)
{
google.maps.Marker.prototype.initialize.call(this, map);
var label = document.createElement('div');
label.className = this.labelClass;
label.innerHTML = this.labelText;
label.style.position = 'absolute';
label.style.width = '48px';
map.getPane(G_MAP_MARKER_PANE).appendChild(label);
this.map = map;
this.label = label;
}
google.maps.LabelMarker.prototype.redraw = function(force)
{
google.maps.Marker.prototype.redraw.call(this, map);
if(!force)
{
return;
}
var point = this.map.fromLatLngToDivPixel(this.latlng);
var z = google.maps.Overlay.getZIndex(this.latlng.lat());
this.label.style.left = (point.x + this.labelOffset.width) + 'px';
this.label.style.top = (point.y + this.labelOffset.height) + 'px';
this.label.style.zIndex = z + 1;
}
google.maps.LabelMarker.prototype.remove = function()
{
this.label.parentNode.removeChild(this.label);
this.label = null;
google.maps.Marker.prototype.remove.call(this);
}
var n= 21;//在这里接收要显示的信息，文字要用双引号""
function getTextIcon()
{
var icon = new google.maps.Icon();
icon.image = "blue.png";
//icon.image = "http://labs.google.com/ridefinder/images/mm_20_yellow.png";
icon.iconSize = new GSize(37,37 );
icon.iconAnchor = new GPoint(0, 40);
icon.infoWindowAnchor = new GPoint(5, 1);
return icon;
}
var marker = new google.maps.LabelMarker(map.getCenter(), { labelText:n});//在这加入n
map.addOverlay(marker);
}
}
</script>
</head>
<body onLoad="load()" onUnload="GUnload()">
<!-- 地图画板 -->
<div id="map_canvas" style="width:640px; height:480px"></div>
</body>
</html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
AiPPT
2024-09-19 广告
随着AI技术的飞速发展，如今市面上涌现了许多实用易操作的AI生成工具1、简介：AiPPT: 这款AI工具智能理解用户输入的主题，提供“AI智能生成”和“导入本地大纲”的选项，生成的PPT内容丰富多样，可自由编辑和添加元素，图表类型包括柱状图...
点击进入详情页
本回答由AiPPT提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
