`
wfdoublext
  • 浏览: 128720 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

google地图图标

GoogleJavaScriptHTML 
阅读更多

 

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

 

分享到：
| WCF实例（基于TCP协议的配置）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ic_谷歌地图图标集.zip

    【谷歌地图图标集】是一个包含了超过600个图标的资源包，专为与地图相关的应用和设计工作提供丰富的视觉元素。这些图标涵盖了各种场景，包括但不限于定位、停车场、餐厅、道路设施、公共厕所、商店、学校、数字编号...

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

    谷歌地图 Google Map API V3 中文开发文档 谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口，允许开发者在自己的网站或应用程序中嵌入谷歌地图，以提供地图检索、...

    google地图应用示例源码

    Marker的图标可以是预定义的Google地图图标，也可以是自定义的图像。通过`MarkerOptions`对象，我们可以设置Marker的图标URL、大小、偏移量等。这样，我们可以为不同类型的地点设置不同的图标，例如，用不同的图标...

    Google地图中的标绘图标

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

    谷歌地图的标注隐藏与显示

    ### 谷歌地图标注的隐藏与显示 在进行谷歌地图开发时，为了增强地图的信息性和交互性，开发者经常会向地图上添加各种标注。这些标注不仅能够帮助用户更直观地理解特定地理位置的相关信息，还能根据用户的兴趣或需求...

    2023奥维地图谷歌图源添加方法

    在地图界面，你可以看到地图风格的变化，如果成功，应该能看到谷歌地图的特征，如清晰的卫星图像、街景图标等。 注意事项： 1. 添加非官方图源可能会有法律风险，确保你使用的是允许的、公开分享的图源。 2. 使用...

    GoogleMaps图标包

    Marker是Google Maps API中的一个关键组件，用于在地图上放置一个可自定义的点状图标，代表特定的地理位置。开发者可以使用默认的Marker图标，也可以自定义图标，以满足不同应用需求。例如，自定义图标可以用来区分...

    C#开发中谷歌地图调用

    在C#开发中调用谷歌地图API是一项常见的任务，它能为应用程序添加地图展示、定位、导航等功能。本文将详细讲解如何使用谷歌地图API以及涉及的核心类。 首先，要使用谷歌地图API，首要步骤是注册API密钥。如果你的...

    谷歌地图的级别与对应比例尺

    获取谷歌地图的比例尺和分辨率，用户可以访问Google Map网页版，在页面左下角可以看到比例尺图标。通过调整地图级别，可以观察到不同级别的比例尺变化。例如，在第11级时，10公里对应72个像素。通过图像处理软件，如...

    地图图标个人开发收集

    在IT行业中，地图图标在各种应用和系统中扮演着至关重要的角色，特别是在地理信息系统（GIS）、导航软件、旅游应用以及在线地图服务等领域。本资源集合是个人开发者在地图开发过程中积累的地图图标，专为了解决在...

    谷歌地图开发实例

    在IT行业中，谷歌地图开发是一项重要的技能，尤其对于构建地理信息系统（GIS）或者与地理位置相关的应用来说。本实例主要关注如何使用谷歌地图API来标记兴趣点并实现自我定位功能。以下将详细介绍这些知识点： 首先...

    googlemap谷歌地图标记拖动选择多选

    在IT行业中，尤其是在Web开发领域，谷歌地图（Google Maps）是一个广泛应用的服务，它提供了丰富的API供开发者集成到自己的网站或应用中，实现各种定制化的地理信息功能。本篇将详细探讨"googlemap谷歌地图标记拖动...

    谷歌地图API实现运行轨迹 画箭头操作的小例子

    谷歌地图API是一个强大的工具，它允许开发者在网页上嵌入地图并进行各种定制化操作，如标记、路径规划、实时定位等。在这个特定的例子中，我们将深入探讨如何使用谷歌地图API来实现运动轨迹的绘制以及在轨迹上添加...

    谷歌地图 聚合marker例子

    谷歌地图 大批量打点marker 聚合打点 例子，可以参考，国内可以打开。

    谷歌地图开发.doc

    ### 谷歌地图开发：深入理解地图应用的构建与技术要点 #### 一、程序功能概述 在《谷歌地图开发.doc》文档中，我们首先接触到的是程序功能的概述，这里详细介绍了用户界面的设计和主要功能特性。核心在于地图模式...

    google-maps-icons:Google Maps 和 Meteor 的丰富图标和图标聚类

    本文将深入探讨如何利用Google Maps API以及JavaScript库Meteor来创建丰富多样的图标和图标聚类，以提升地图的视觉效果和用户体验。 首先，标题中的"google-maps-icons"是一个项目，它提供了一套定制的图标资源，...

    jquery 谷歌地图插件

    jQuery谷歌地图插件是一种强大的工具，它允许开发者利用jQuery库的简洁语法和高效性能来集成谷歌地图API，为网站或应用程序添加交互式地图功能。在本文中，我们将深入探讨jQuery谷歌地图插件的工作原理、主要功能...

    谷歌地图web

    在谷歌地图API中，可以使用`Marker`对象来创建这些图标。每个`Marker`对象可以有一个图标属性，你可以指定一个URL链接到图片，或者使用`google.maps.Symbol`来创建自定义形状。例如，如果你想在地图上放置一个特定...

    vue2googlemap基于Vue2x和google地图组件

    - **标记（Markers）**：可以通过`gmap-marker`组件在地图上添加标记，可以设置标记的位置、图标、点击事件等。 - **信息窗口（InfoWindows）**：配合`gmap-infoWindow`组件，可以在标记上显示浮动信息框。 - **...

    谷歌地图API源代码

    谷歌地图API（Google Maps API）是谷歌提供的一项强大的服务，允许开发者在自己的网站或应用程序中嵌入交互式地图。这个API提供了丰富的功能，包括地图显示、地理编码、路线规划、定位服务等。通过源代码，我们可以...

Magicbox
Global site tag (gtag.js) - Google Analytics