原文链接

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. HD1712ACboy needs your help（纯裸分组背包）

    ACboy needs your help Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  2. Lua函数之一

    LUA函数之一 函数声明: function foo(arguments) statements end 1.函数调用 调用函数的时候,如果参数列表为空,必须使用()表明是函数调用,例如: os.da ...

  3. linux rpm 安装包 信息查询

    来源:http://blog.csdn.net/namesliu/article/details/6004388 以CentOS5.5 中已经集成安装了 Apache.MySQL.PHP作为样例,我们 ...

  4. Nginx HA 及https配置部署

    Nginx HA 整体方案架构为: (内网192.168.199.5) +-----------VIP----------+ | | | | Master Backup 192.168.199.90 ...

  5. matlab之round any size rat isscalar ismatrix mean find max

    1.round : 四舍五入 例子:a = [-1.9, -0.2, 3.4, 5.6, 7.0, 2.4+3.6i] round(a): [-2  0  3  6  7  2  4] 2.butte ...

  6. 织梦channelid是什么?dede channel typeid有什么区别

    昨儿帮小伙伴整dedecms首页调用栏目文章,当时没注意用到的是channelid参数,修改了好多次赋值,新建了一个新的栏目获取id是156,添加栏目文章,把channelid改为156重新生成首页, ...

  7. poj.2419.Forests (枚举 + set用法）

    Forests Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5782   Accepted: 2218 Descripti ...

  8. 我们为之奋斗过的C#-----Bank系统

    首先感谢大家抽出宝贵的时间来看这个Bank系统,这是我最近学的Bank系统,你们看我刚一学完就给你们分享了我的所学以及学习的一些经验,所以大家一定要耐心看下去,真的你会有所收获的,不信你看看.下面话不 ...

  9. PHP学习之一晚撸下W3chscool

    PHP 多维数组 其实简单的而言,多维数组就是由单个的数组组成的,两个数组嵌套组成一个二维数组,三个顾名思义就是三维数组. 先来一个简单的数组. 数字是key,引号里的是value <?php ...

  10. tomcat安全配置(二)

    1. JVM 1.1. 使用 Server JRE 替代JDK. 服务器上不要安装JDK,请使用 Server JRE. 服务器上根本不需要编译器,代码应该在Release服务器上完成编译打包工作. ...