`
ponlya
  • 浏览: 164347 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

GoogleMap V3 Marker 标记

    博客分类:
  • maps
 
阅读更多

Marker用来标记单个点,或者多个

示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Marker Animations</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
  var myLatlng = new google.maps.LatLng(36.612,113.766); //河北,邯郸
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
 </script> 
</head>
<body>
	<div id="map-canvas"></div>
</body>
</html>

 标记多个点,并为标记设置click事件

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(30.51667,114.31667),
    mapTypeId: google.maps.MapTypeId.HYBRID
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  setMarkers(map, beaches);
}

var beaches = [
  ['河北省邯郸市涉县井店二街村 ',36.60 , 113.77, 4], 
  ['2广东省惠州市龙门县仙女石 ', 23.75, 113.98, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map  
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map, 
        title: beach[0],
        zIndex: beach[3]
    });
	
	google.maps.event.addListener(marker, 'click', function() {
		map.setZoom(8);
		map.setCenter(marker.getPosition());
	});

  }
}
google.maps.event.addDomListener(window, 'load', initialize);

 

分享到:
评论

相关推荐

    GoogleMap V3 中文 教程

    Google Map V3是Google Maps API的一个重要版本,主要针对Web开发,提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API,即便在无法访问互联网的情况...

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

    Marker 是谷歌地图 Google Map API V3 中的一个重要组件,用于在地图上标记一个特定的位置。开发者可以使用 Marker 对象来创建一个新的标记,该对象提供了多种方法和属性,以便开发者可以自定义标记的样式和行为。 ...

    google map api v3源码

    由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码,了解上述知识点的实际应用,并进一步扩展自己的地图应用开发...

    wpf google map v3 示例

    综上所述,"wpf google map v3 示例"是一个展示如何在WPF中集成Google Maps API V3并实现动态添加标记的示例。它涵盖了WPF WebBrowser控件的使用、JavaScript与C#的交互、Google Maps API的API调用等多个技术点,...

    谷歌MAP_V3中文详解以及一个简单例子

    除了基本的标记和信息窗口,谷歌地图API V3还支持形状(Shapes,如多边形、圆)、覆盖物(Overlays,如图片)、地理编码(Geocoding,地址转经纬度)以及路线规划(Directions)等功能。这些特性让开发者能够构建出...

    Google Map v3 官方实例

    3. **标记(Markers)**:通过`google.maps.Marker`类,可以在地图上添加表示特定位置的图标。你可以自定义标记的图标,设置点击事件监听器,以及动态改变标记的位置。 4. **信息窗口(InfoWindows)**:与标记关联...

    googleMap V3 中文API

    - `google.maps.Marker`用于在地图上添加图标或文本。你可以自定义标记的位置、图标、是否可拖动等属性。 5. **信息窗口(InfoWindows)**: - `google.maps.InfoWindow`用于在地图上显示弹出信息。它可以包含...

    Google Map api V3 (3.9.12)的离线开发包

    Google Map API V3(3.9.12)是谷歌提供的一个用于在网页上嵌入交互式地图的服务,它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试,这...

    Javascript计算两个marker之间的距离(Google Map V3)

    在使用Google Map V3进行地图开发的过程中,常常需要对地图上的marker点进行操作和交互。marker点作为地图上的标记物,通常用于表示特定的位置。计算两个marker点之间的距离是地图应用中的一项常见需求,它可以帮助...

    google map v3 demo 数据库动态案例 php的

    var marker = new google.maps.Marker({ position: location, map: map }); document.getElementById("show_x").value = location.lat(); //获得标记的经度并显示在文本框中 document.getElementById("show_y...

    google map jsv3 示例

    3. **标记(Marker)**:要在地图上添加点标记,可以使用`new google.maps.Marker()`创建一个标记对象,设置其位置、图标、信息窗口等内容。标记可以通过事件监听器实现交互,如点击弹出信息窗口。 4. **信息窗口...

    经典教程:JavaScript调用Google Map API V3

    - **添加标记和路径**:你可以添加自定义的图标(标记)到地图上的特定位置,每个标记由`google.maps.Marker`对象表示。此外,还可以绘制路线,这通常涉及使用`google.maps.Polyline`对象来定义一系列连接的地理...

    Google map 谷歌地图 Google地图 V3 第三版

    在地图上添加标记是常见的需求,可以通过`google.maps.Marker`对象实现。同时,可以为标记添加信息窗口显示详细信息。 ```javascript var marker = new google.maps.Marker({ position: myLatLng, map: map, ...

    google Map api v3学习例子

    通过这个"google Map api v3学习例子",你可以逐步掌握如何利用Google Maps API V3构建交互式地图应用,包括添加标记、处理事件、展示叠加层等功能。实践中不断探索,你会发现Google Maps API V3的强大和灵活性,能...

    google api v3 实例

    3. **标记(Marker)与信息窗口(InfoWindow)**:标记可以用来表示地图上的特定点,它们可以通过`google.maps.Marker`类创建。信息窗口则可以显示有关标记的详细信息,通过`google.maps.InfoWindow`类实现,通常与...

    google map api v3 ExtDraggableObject

    谷歌地图API V3是Google为开发者提供的一种强大的工具,用于在网页上集成和操作地图。在API中,`ExtDraggableObject`是一个自定义扩展类,它允许用户将地图上的对象(如标记、覆盖物等)进行拖放操作,极大地增强了...

    google-maps-marker-clusterer-v3:Google Maps v3的标记群集器

    总之,"google-maps-marker-clusterer-v3"是优化Google Maps显示大量标记的有效工具,通过群集技术提升了用户体验。开发者可以利用它来创建更加流畅、直观的地图应用,同时保持优秀的性能表现。正确理解和使用这个库...

    Google MAP 学习例程

    通过这个“Google MAP 学习例程”,你将逐步学会如何使用Google Map V3 API进行地图应用开发,包括创建和操作地图、添加标记和路径、使用各种地图服务,以及自定义地图交互。实践中不断探索,你将能创造出富有创新和...

    谷歌地图API-google map api v3

    - **Marker**: 标记是地图上显示的一个点。 - **MarkerOptions**: 包括位置、图标等配置。 - **Icon**: 自定义图标。 - **MarkerShape**: 图标的形状。 - **Symbol**: 特殊图标。 - **InfoWindow**: 信息窗口,...

    vue2-gmap-custom-marker:Vue Google Map自定义标记组件

    该组件是与一些伟大的想法在谷歌地图V3覆盖代码示例改编从这个。 /!\ 重要的提示 该项目最初是的插件。 现在,该项目似乎不再受维护,并且已开始维护已维护的。由于这是一个派生,因此该插件应该看起来像在工作。 ...

Global site tag (gtag.js) - Google Analytics