1.在指定位置指定一个标记。
var point = new GLatLng(31.22,121.48); //标记的经续度
map.addOverlay(new GMarker(point));
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(31.22, 121.48), 3);
var point = new GLatLng(31.22,121.48);
map.addOverlay(new GMarker(point));
}
}
//]]>
</script>
</body>
效果地址:http://www.jeeka.com.cn/websoft/googlemap/dingwei.html
2.随机增加10个地图标记
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917,116.397), 14);
var bounds = map.getBounds(); //获取边界
var southWest = bounds.getSouthWest(); //返回矩形西南角的点
var northEast = bounds.getNorthEast();//返回矩形东北角的点
var lngSpan = northEast.lng() - southWest.lng(); //经度坐标差
var latSpan = northEast.lat() - southWest.lat();//纬度坐标差
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()); //设置坐标
map.addOverlay(new GMarker(latlng));//在新层里添加标记
}
}
}
</script>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
演示地址:http://www.jeeka.com.cn/websoft/googlemap/10point.html
3.增加自定义图标标记
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(31.22, 121.48), 3);
var icon=new GIcon();
icon.image="images/psi3.gif";
icon.iconSize = new GSize(16,16); //图片尺寸
icon.iconAnchor = new GPoint(8,8);
icon.infoWindowAnchor = new GPoint(8, 8);
var mark = new GMarker(
new GLatLng(31.22, 121.48),
{icon:icon, title:"good"}
);//鼠标经过显示good
map.addOverlay(mark);
}
}
//]]>
//
</script>
</body>
演示地址:http://www.jeeka.com.cn/websoft/googlemap/xtub.html
4.自定义图标函数addsite：点击弹出框显示对应信息
实现代码:
<script type="text/javascript">
//<![CDATA[
google.load("maps", "2.x");
google.setOnLoadCallback(initialize);
var map = null;
function initialize() {
if ( GBrowserIsCompatible() ) {
map = new google.maps.Map2(document.getElementById('map'));
// O؈Dc
map.setCenter(new GLatLng(25.036772,121.520269), 12);
addSite(map,12,'图标一',25.062361,121.526194,'111',1);
addSite(map,13,'图标二',25.030000,121.490556,'2222',2);
addSite(map,14,'图标三',25.020833,121.528611,'3333',3);
} // if
else {
alert('Ğg[֧ԮGoogle Map');
} // else
}
function addSite(map, siteCode, siteDesc, lat, lng, address, type) {
var icon=new GIcon();
icon.image="images/psi"+type+".gif";
icon.iconSize = new GSize(16,16);
icon.iconAnchor = new GPoint(8,8);
icon.infoWindowAnchor = new GPoint(8, 8);
var mark = new GMarker(
new GLatLng(lat,lng),
{icon:icon, title:siteDesc}
);
map.addOverlay(mark);
GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('ַ'+address);});
}
//]]>
</script>
</head>
<body onunload="GUnload()">
<div id="map" style="width:500px; height:500px"></div>
</body>
演示地址:http://www.jeeka.com.cn/websoft/googlemap/tubiao2.html
var point = new GLatLng(31.22,121.48); //标记的经续度
map.addOverlay(new GMarker(point));
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(31.22, 121.48), 3);
var point = new GLatLng(31.22,121.48);
map.addOverlay(new GMarker(point));
}
}
</script>
</body>
效果地址:http://www.jeeka.com.cn/websoft/googlemap/dingwei.html
2.随机增加10个地图标记
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917,116.397), 14);
var southWest = bounds.getSouthWest(); //返回矩形西南角的点
var northEast = bounds.getNorthEast();//返回矩形东北角的点
var lngSpan = northEast.lng() - southWest.lng(); //经度坐标差
var latSpan = northEast.lat() - southWest.lat();//纬度坐标差
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()); //设置坐标
map.addOverlay(new GMarker(latlng));//在新层里添加标记
}
}
}
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(31.22, 121.48), 3);
var icon=new GIcon();
icon.image="images/psi3.gif";
icon.iconSize = new GSize(16,16); //图片尺寸
icon.iconAnchor = new GPoint(8,8);
icon.infoWindowAnchor = new GPoint(8, 8);
var mark = new GMarker(
new GLatLng(31.22, 121.48),
{icon:icon, title:"good"}
);//鼠标经过显示good
map.addOverlay(mark);
}
}
</script>
</body>
实现代码:
//<![CDATA[
google.load("maps", "2.x");
google.setOnLoadCallback(initialize);
var map = null;
function initialize() {
if ( GBrowserIsCompatible() ) {
map = new google.maps.Map2(document.getElementById('map'));
// O؈Dc
map.setCenter(new GLatLng(25.036772,121.520269), 12);
addSite(map,12,'图标一',25.062361,121.526194,'111',1);
addSite(map,13,'图标二',25.030000,121.490556,'2222',2);
addSite(map,14,'图标三',25.020833,121.528611,'3333',3);
} // if
else {
alert('Ğg[֧ԮGoogle Map');
} // else
}
var icon=new GIcon();
icon.image="images/psi"+type+".gif";
icon.iconSize = new GSize(16,16);
icon.iconAnchor = new GPoint(8,8);
icon.infoWindowAnchor = new GPoint(8, 8);
new GLatLng(lat,lng),
{icon:icon, title:siteDesc}
);
map.addOverlay(mark);
GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('ַ'+address);});
}
//]]>
</script>
</head>
<div id="map" style="width:500px; height:500px"></div>
</body>
演示地址:http://www.jeeka.com.cn/websoft/googlemap/tubiao2.html
发表评论
-
兼容模式设置
2011-09-13 09:28 961为了最好的视觉效果，可以进行兼容模式设置，如不设置也可正 ... -
iefav
2010-09-17 10:14 0反对伐发放 -
fsda
2010-09-16 16:20 0fadfa -
book
2010-09-16 16:16 0rwe -
SQLdll
2010-09-16 16:13 0gsf -
xml验证 转载
2010-05-14 10:04 1107开发环境：VS2008 在.NET中说到验证XML，估 ... -
内部排序算法
2010-04-28 07:57 716几种内部排序算法总结!(冒泡排序、快速排序、直接插入排序、 ... -
tree
2009-01-20 09:51 635tree -
iframe 父子窗体调用
2008-11-20 16:03 1534iframe 父窗口和子窗口的调用方法 Posted on ... -
table行列固定
2008-11-04 13:27 2329<html> <head> <s ... -
DHtml
2008-09-26 10:21 619dhtml -
group box
2008-07-02 13:18 1176关于Silverlight Silverlight 是一个跨浏 ... -
vml 饼图
2008-07-01 16:59 1790<html xmlns:v="urn:sche ... -
vml 折线图
2008-07-01 16:57 2028<HTML xmlns:v="urn:sche ... -
vml资料
2008-06-18 16:45 2007http://hi.baidu.com/greatmast ... -
前台图片效果
2008-06-18 14:29 1363<SPAN class="bold" ... -
锚点是什么？
2008-05-05 15:10 15021：锚点是什么？锚点也可以理解成为一种超级链接，只不过它是网页 ... -
webchart作图
2008-05-05 12:57 2229<%@ Import Namespace="S ... -
vml圆角，箭头（IE）
2008-05-05 12:51 2776<HTML xmlns:v> <HEAD& ...
相关推荐
【谷歌地图图标集】是一个包含了超过600个图标的资源包，专为与地图相关的应用和设计工作提供丰富的视觉元素。这些图标涵盖了各种场景，包括但不限于定位、停车场、餐厅、道路设施、公共厕所、商店、学校、数字编号...
谷歌地图 Google Map API V3 中文开发文档 谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口，允许开发者在自己的网站或应用程序中嵌入谷歌地图，以提供地图检索、...
Marker的图标可以是预定义的Google地图图标，也可以是自定义的图像。通过`MarkerOptions`对象，我们可以设置Marker的图标URL、大小、偏移量等。这样，我们可以为不同类型的地点设置不同的图标，例如，用不同的图标...
### 谷歌地图标注的隐藏与显示 在进行谷歌地图开发时，为了增强地图的信息性和交互性，开发者经常会向地图上添加各种标注。这些标注不仅能够帮助用户更直观地理解特定地理位置的相关信息，还能根据用户的兴趣或需求...
本话题主要关注的是Google地图中用于标绘和展示查询结果的图标。 图标在用户界面设计中扮演着至关重要的角色，它们是信息可视化的一种高效方式，尤其在地图应用中。Google地图使用各种图标来指示不同的地点类型，如...
奥维互动地图是一款功能强大的地图软件，它支持多种地图源，包括谷歌地图、百度地图、高德地图等。本文将详细介绍“奥维8种新版自定义地图包括Google地图.zip”这个压缩包文件所包含的内容以及如何使用这些自定义...
在地图界面，你可以看到地图风格的变化，如果成功，应该能看到谷歌地图的特征，如清晰的卫星图像、街景图标等。 注意事项： 1. 添加非官方图源可能会有法律风险，确保你使用的是允许的、公开分享的图源。 2. 使用...
谷歌地图API是一个强大的工具，它允许开发者在网页上嵌入地图并进行各种定制化操作，如标记、路径规划、实时定位等。在这个特定的例子中，我们将深入探讨如何使用谷歌地图API来实现运动轨迹的绘制以及在轨迹上添加...
获取谷歌地图的比例尺和分辨率，用户可以访问Google Map网页版，在页面左下角可以看到比例尺图标。通过调整地图级别，可以观察到不同级别的比例尺变化。例如，在第11级时，10公里对应72个像素。通过图像处理软件，如...
Marker是Google Maps API中的一个关键组件，用于在地图上放置一个可自定义的点状图标，代表特定的地理位置。开发者可以使用默认的Marker图标，也可以自定义图标，以满足不同应用需求。例如，自定义图标可以用来区分...
在C#开发中调用谷歌地图API是一项常见的任务，它能为应用程序添加地图展示、定位、导航等功能。本文将详细讲解如何使用谷歌地图API以及涉及的核心类。 首先，要使用谷歌地图API，首要步骤是注册API密钥。如果你的...
基于PHP和jQuery的Google地图开发之多个marker显示，并且设置让其在数量过多时聚合。由于是给外国客户开发的接口（还没有做完，只是一个demo），所以里面的说明注释都是英文的，但我相信你们看得懂的
在IT行业中，地图图标在各种应用和系统中扮演着至关重要的角色，特别是在地理信息系统（GIS）、导航软件、旅游应用以及在线地图服务等领域。本资源集合是个人开发者在地图开发过程中积累的地图图标，专为了解决在...
在IT行业中，谷歌地图开发是一项重要的技能，尤其对于构建地理信息系统（GIS）或者与地理位置相关的应用来说。本实例主要关注如何使用谷歌地图API来标记兴趣点并实现自我定位功能。以下将详细介绍这些知识点： 首先...
在IT行业中，尤其是在Web开发领域，谷歌地图（Google Maps）是一个广泛应用的服务，它提供了丰富的API供开发者集成到自己的网站或应用中，实现各种定制化的地理信息功能。本篇将详细探讨"googlemap谷歌地图标记拖动...
谷歌地图 大批量打点marker 聚合打点 例子，可以参考，国内可以打开。
### 谷歌地图开发：深入理解地图应用的构建与技术要点 #### 一、程序功能概述 在《谷歌地图开发.doc》文档中，我们首先接触到的是程序功能的概述，这里详细介绍了用户界面的设计和主要功能特性。核心在于地图模式...
本文将深入探讨如何利用Google Maps API以及JavaScript库Meteor来创建丰富多样的图标和图标聚类，以提升地图的视觉效果和用户体验。 首先，标题中的"google-maps-icons"是一个项目，它提供了一套定制的图标资源，...
Qt 谷歌地图的示例程序。 一点不懂webkit和javascript开始摸起。如有疏漏多多斧正。 例子的功能就是在标准的qt主窗口加载一个谷歌地图。webkit在（0，0）放置一个图标。地图移动后通知Qt在标准输出打印经纬度。 ...
jQuery谷歌地图插件是一种强大的工具，它允许开发者利用jQuery库的简洁语法和高效性能来集成谷歌地图API，为网站或应用程序添加交互式地图功能。在本文中，我们将深入探讨jQuery谷歌地图插件的工作原理、主要功能...