原文链接

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. HYSBZ 4197 寿司晚宴

    Description 为了庆祝 NOI 的成功开幕,主办方为大家准备了一场寿司晚宴.小 G 和小 W 作为参加 NOI 的选手,也被邀请参加了寿司晚宴. 在晚宴上,主办方为大家提供了 n−1 种不同 ...

  2. CVE-2014-4877 && wget: FTP Symlink Arbitrary Filesystem Access

    目录 . 漏洞基本描述 . 漏洞带来的影响 . 漏洞攻击场景重现 . 漏洞的利用场景 . 漏洞原理分析 . 漏洞修复方案 . 攻防思考 1. 漏洞基本描述 0x1: Wget简介 wget是一个从网络 ...

  3. 彻底理解position与anchorPoint

    引言 相信初接触到CALayer的人都会遇到以下几个问题: 为什么修改anchorPoint会移动layer的位置?CALayer的position点是哪一点呢?anchorPoint与positio ...

  4. HD1847 Good Luck in CET-4 Everybody!（巴什博弈）

    巴什博弈: 一堆物品n个,最多取m个,最少取1个,最后取走的人获胜 分析:只要保证取玩最后剩m+1个,则必定胜利,所以构造m+1,只要n是 m+1的倍数,则先手必败,每次先手取玩,后手可取使得剩下的仍 ...

  5. 使用UpdLock来扣减库存

    UPDLOCK.UPDLOCK 的优点是允许您读取数据(不阻塞其它事务)并在以后更新数据,同时确保自从上次读取数据后数据没有被更改. 当我们用UPDLOCK来读取记录时可以对取到的记录加上更新锁,从而 ...

  6. html5+ 获取当前设备的加速度信息

    getCurrentAcceleration 获取当前设备的加速度信息 void plus.accelerometer.getCurrentAcceleration( successCB, error ...

  7. 初学hibernate之缓存

    一.1.Session级别缓存属于一级缓存,持久化对象保存在Session一级缓存中(一级缓存引用持久化对象地址),只要session不关闭,一级缓存就存在,缓存中对象也不会被回收: Session会 ...

  8. JSP 使用

    JSP教程: http://www.w3cschool.cc/jsp/jsp-tutorial.html jsp语法: 任何语言都有自己的语法,JAVA中有,JSP虽然是在JAVA上的一种应用,但是依 ...

  9. 伪分布模式下执行wordcount实例时报错解决办法

    问题1.不能分配内存,错误提示如下: FAILEDjava.lang.RuntimeException: Error while running command to get file permiss ...

  10. phpcms 调取全站文章

    路径:phpcms/module/content/classes/content_tag.class.php 添加如下方法 /** * 列表页标签:主要返回的是主表中数据与附表中数据 * @param ...