原文链接

google maps javascript官方文档：https://developers.google.com/maps/documentation/javascript/

我们在创建地图之后，怎么往地图上添加标记呢？

google为我们提供了google.maps.Marker这个构造函数，来创建标记。

这个函数有一个object类型的可选参数，常用的成员有：

｛

position: new google.maps.LatLng(lat,lng), //标记的经纬度

map：map,  //地图对象

icon:{

url:'',

size:20,

anchor: (10,10),

origin: (0,0)

}， //标记的icon

draggable: true, //标记是否可以拖动

clockable: true, //标记是否接收鼠标点击事件

opacity: 0~1, //标记的透明度

｝

下面我们来为地图添加一个标记，代码如下：

<!DOCTYPE html>

<html>

  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">

    <title>Simple markers</title>

    <style>

      html, body {

        height: 100%;

        margin: 0;

        padding: 0;

      }

      #map {

        height: 100%;

      }

    </style>

  </head>

  <body>

    <div id="map"></div>

    <script>

      function initMap() {

        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {

          zoom: 4,

          center: myLatLng

        });

        //创建一个marker

        var marker = new google.maps.Marker({

          position: myLatLng,

          map: map,

          title: 'Hello World!'

        });

      }

    </script>

    <script async defer

    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">

    </script>

  </body>

</html>

如果我们想移除一个marker，则只需执行marker.setMap(null);即可。

google maps js v3 api教程(2) -- 在地图上添加标记的更多相关文章

  1. google maps js v3 api教程(1) -- 创建一个地图

    原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前 ...

  2. google maps js v3 api教程(3) -- 创建infowindow

    原文地址 前面我们学习了地图和标记的创建.那么今天我们来学习怎样在地图上显示一个窗口(infowindow) infowindow构造函数为:InfoWindow(opts?:InfoWindowOp ...

  3. 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

  4. Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  5. 【百度地图API】建立全国银行位置查询系统（三）——如何在地图上添加银行标注

    原文:[百度地图API]建立全国银行位置查询系统(三)--如何在地图上添加银行标注 <摘要>你将在第三章中学会以下知识: 如何在地图上添加带银行logo的标注?(你也可以换成商场logo, ...

  6. 十个书写Node.js REST API的最佳实践（上）

    收录待用,修改转载已取得腾讯云授权 原文:10 Best Practices for Writing Node.js REST APIs 我们会通过本文介绍下书写Node.js REST API的最佳 ...

  7. 如何在 Google 地图中添加标记和说明

    JS如下: (function() {     window.onload = function() {         // Creating an object literal containin ...

  8. 【译】Meteor 新手教程：在排行榜上添加新特性

    原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...

  9. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

随机推荐

  1. Windows下一些配置信息

    VC.VS和.NetFramework版本对应关系 VC6.0对应VS 6.0 VC7.0对应VS 2002 VC7.1对应VS 2003 .Net Framework1.0/1.1 VC8.0对应V ...

  2. 【bzoj1486】 HNOI2009—最小圈

    http://www.lydsy.com/JudgeOnline/problem.php?id=1486 (题目链接) 题意 给出一张有向图,规定一个数值u表示图中一个环的权值/环中节点个数.求最小的 ...

  3. Codeforces 593B Anton and Lines

    LINK time limit per test 1 second memory limit per test 256 megabytes input standard input output st ...

  4. linux4

    linux 特点:1.免费 开源(代码公开)2.支持多线程/多用户的操作系统3.安全性4.对内存和文件管理有自己的一套优越的方法 linux最小只需要4M ->嵌入式开发默认不启动用户界面roo ...

  5. Nginx变量的实现机制

    Nginx有两种定义变量的方式,一种是在配置文件中使用set指令(由rewrite模块提供支持),另一种是在模块内定义变量. 变量相关结构体: struct ngx_http_variable_s { ...

  6. SQL2005删除复制数据库的发布与订阅的方法（转载）

    SQL2005删除复制数据库的发布与订阅的方法 --在测试环境中恢复从正式数据库服务器 上备份下来的bak文件后,正式环境里数据库复制的发布.订阅也被带进来了,结果恢复的数据库无法更改表结构,直接删除 ...

  7. C# 获取时间差（几天前，几小时前，几分钟前，几秒前）

    #region 获取时间差string GetTime(BsonString getTime) /// <summary> /// 获取时间差 /// </summary> / ...

  8. 马化腾:办公用QQ休闲用微信[Dream Catchers论坛]

    近日,香港大学举办以创新创业为主题的Dream Catchers论坛.其中腾讯董事局主席马化腾在下午两点四十五分在李兆基会议中心做了专题演讲,分享了自己的创业经历并回答了媒体人张力奋有关产品.整整对手 ...

  9. XSS代码触发条件，插入XSS代码的常用方法

    1.脚本插入 (1)插入javascript和vbscript正常字符. 例1:<img src=”javascript:alert(/xss/)”> 例2:<table backg ...

  10. Xcode 5.0.2 下载地址

    下载地址:http://adcdownload.apple.com/Developer_Tools/xcode_5.0.2/xcode_5.0.2.dmg command_line_tools_os_ ...