`

谷歌地图做定位小图标,并做出定位事件,事件窗口

阅读更多

 
 


 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>谷歌地图测试</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;" type="text/javascript"></script>
     
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
			var map = new GMap2(document.getElementById("map"));
			map.addControl(new GSmallMapControl());
                                                map.addControl(new GMapTypeControl());
			map.setCenter(new GLatLng(22.55, 114.09),15);
			// Create our "tiny" marker icon
			var baseIcon = new GIcon();
			baseIcon.iconSize = new GSize(40,49);
			baseIcon.iconAnchor = new GPoint(9, 34);
			baseIcon.infoWindowAnchor = new GPoint(9, 2);
			baseIcon.infoShadowAnchor = new GPoint(18, 25);

			function createMarker(point, index) {
				  // Create a lettered icon for this point using our icon class
				  var icon = new GIcon(baseIcon);
				  icon.image = "dituicon.gif";
				  var marker = new GMarker(point, icon);

				  GEvent.addListener(marker, "click", function() {
					  marker.openInfoWindowHtml("welcome shengzhen");
				  });
				  return marker;
			}

               
			// Add 10 markers to the map at random locations
			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 < 30; i++) {
			   var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
									  southWest.lng() + lngSpan * Math.random());
			   map.addOverlay(createMarker(point, i));
			}
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 1200px; height: 600px"></div>
  </body>
</html>

 定们小图标为:

 

  • 大小: 271.2 KB
  • 大小: 3.4 KB
分享到:
评论

相关推荐

    超实用的百度地图开发定位小图标分享

    本文将详细探讨“超实用的百度地图开发定位小图标”的相关知识点,包括百度地图API的使用、定位小图标的定制以及覆盖物的概念。 首先,我们要了解**百度地图API**。这是一个强大的开发工具,允许开发者在网页或移动...

    百度地图定位小图标

    "百度地图定位小图标"这个资源包,显然是为开发者提供了在百度地图上显示各种标记、指示符或者自定义图标的素材。 首先,我们要了解百度地图API,它是百度提供的一套用于在Android应用中集成地图服务的开发工具。...

    百度地图定位开发图标大全

    里面是百度地图开发所用的很全的图标,从百度地图SDK的sample中获取,我从网上找了很久都没找到,很给力的说~

    百度地图定位开发图标大全(包括定位箭头、定位圆圈)

    本压缩包文件“百度地图定位开发图标大全(包括定位箭头、定位圆圈)”就是针对这一需求,提供了一系列的定位图标,帮助开发者美化和优化地图定位功能。 首先,我们来了解一下“百度地图图标”的概念。百度地图图标是...

    Android实现百度地图定位及自定义缩放图标

    总结,实现“Android实现百度地图定位及自定义缩放图标”主要涉及以下几个步骤:注册并获取百度地图API密钥、添加SDK依赖、创建并初始化MapView、开启定位功能、自定义定位图标以及合理管理定位功能的开启和关闭。...

    地图定位的小程序

    在地图定位小程序中,可能包含地图的个性化图标或者定位点的图片。 通过学习这个项目,开发者不仅可以掌握微信小程序的基础架构,还能深入理解地图定位相关的API,包括获取用户实时位置、显示地图、设置标记、导航...

    javascript google地图覆盖物+定位城市名称

    2. **地图覆盖物(Overlays)**:覆盖物是Google Maps API中一种可以覆盖在地图上的元素,如自定义图标、信息窗口、热力图等。在这个场景中,"将省份各个地图色块显示"可能是通过创建自定义覆盖物,用以表示特定的...

    不同颜色百度地图开发定位图标

    "不同颜色百度地图开发定位图标"这个主题主要涉及的是如何利用颜色编码来增强地图上的视觉效果,使得信息传达更加直观。本文将深入探讨这一技术及其在实践中的应用。 首先,我们要理解百度地图API提供的功能。百度...

    谷歌地图Google Map API V3中文开发文档

    谷歌地图 Google Map API V3 中文开发文档提供了一个详细的中文开发指南,涵盖了谷歌地图 Google Map API V3 的使用方法、相关类库、事件处理等方面的知识点。开发者可以根据自己的需求,选择合适的组件和方法来创建...

    天地图显示定位显示图层

    在Android开发领域,"天地图显示定位显示图层"是一个重要的功能实现,它结合了地理信息系统(GIS)和移动应用技术,使得用户可以在移动设备上查看、定位并操作地图图层。下面将详细介绍这一功能的实现及其相关知识点...

    地图定位小程序源码.zip

    地图定位小程序源码是开发一款基于地理位置服务的小程序所必需的核心代码资源。这款小程序能够帮助用户在微信、支付宝等平台上快速获取当前位置,并提供导航、搜索周边设施等多种功能。以下是关于地图定位小程序源码...

    安卓高德地图定位功能

    总的来说,这个“安卓高德地图定位功能”项目展示了如何在安卓应用中集成高德地图,实现实时定位、点击marker显示位置以及3D地图效果。通过这个示例,开发者可以学习到高德地图API的基本用法,为进一步开发地图相关...

    ic_谷歌地图图标集.zip

    1. **定位图标**:通常表现为一个指向中心的小箭头,代表当前用户的地理位置,是地图应用中的核心元素之一,帮助用户找到自己在地图上的位置。 2. **停车场图标**:通常显示为一个P字母或者停车位图案,用于指示...

    Google地图中的标绘图标

    本话题主要关注的是Google地图中用于标绘和展示查询结果的图标。 图标在用户界面设计中扮演着至关重要的角色,它们是信息可视化的一种高效方式,尤其在地图应用中。Google地图使用各种图标来指示不同的地点类型,如...

    谷歌地图开发实例

    本实例主要关注如何使用谷歌地图API来标记兴趣点并实现自我定位功能。以下将详细介绍这些知识点: 首先,谷歌地图API是谷歌提供的一项服务,允许开发者在其网站上嵌入交互式地图,并进行自定义配置。它提供了丰富的...

    百度地图SDK实现定位

    本文将深入讲解如何利用百度地图SDK来实现设备的定位,并将其显示在地图上。 首先,我们需要了解百度地图SDK的基础知识。百度地图SDK(Software Development Kit)是百度为开发者提供的API工具包,它包含了一系列...

    百度地图路径规划以及点击图标大小切换

    在本项目中,我们主要探讨了如何利用百度地图API实现一系列功能,包括地图上的点位显示、用户定位、路径规划以及图标大小的切换。这些功能在日常生活中广泛应用,如共享单车应用,为用户提供方便快捷的导航服务。...

    高德地图和定位的demo

    本demo是为开发者提供的一款示例程序,旨在展示如何集成并有效利用高德地图API来实现地图显示以及精准定位功能。下面将详细介绍这个demo中的关键知识点。 1. **高德地图SDK集成**: 首先,开发者需要在项目中引入...

    腾讯地图定位2个demo(1.一个标记点,地图可点击。2.多个标记点,标记点可以点击并显示信息)

    通过学习和实践这些DEMO,开发者可以掌握地图定位、标记添加、事件监听和信息展示等基本技能,为进一步开发复杂地图应用打下坚实基础。同时,腾讯地图还提供了丰富的高级功能,如实时路况、路径规划、地理编码等,...

    安卓高德地图开发(2)——地图的定位

    同时,我们还需要开启地图的定位层,调用`setMyLocationEnabled(true)`方法,这样地图就会显示一个蓝色的定位图标,表示当前用户的位置。 为了开始定位服务,我们需要创建一个`LocationManager`对象,并请求定位...

Global site tag (gtag.js) - Google Analytics