原文链接

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, //标记的透明度

｝

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  5.     <meta charset="utf-8">
  6.     <title>Simple markers</title>
  7.     <style>
  8.       html, body {
  9.         height: 100%;
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       #map {
  14.         height: 100%;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div id="map"></div>
  20.     <script>
  21.  
  22.       function initMap() {
  23.         var myLatLng = {lat: -25.363, lng: 131.044};
  24.  
  25.         var map = new google.maps.Map(document.getElementById('map'), {
  26.           zoom: 4,
  27.           center: myLatLng
  28.         });
  29.         //创建一个marker
  30.         var marker = new google.maps.Marker({
  31.           position: myLatLng,
  32.           map: map,
  33.           title: 'Hello World!'
  34.         });
  35.       }
  36.     </script>
  37.     <script async defer
  38.     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
  39.     </script>
  40.   </body>
  41. </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. BZOJ 3224 TYVJ 1728 普通平衡树 [Treap树模板]

    3224: Tyvj 1728 普通平衡树 Time Limit: 10 Sec  Memory Limit: 128 MB Submit: 7390  Solved: 3122 [Submit][S ...

  2. android studio问题-ICCP:Not recognizing known sRGB profile

    转:http://my.oschina.net/1pei/blog/479162 PNG格式:每个PNG文件是由一个PNG标识(signature),后面跟一些数据块(chunk),每个chunk由 ...

  3. chroot详解

    我是一个刚接触 Linux 和 Unix 的新手.我该如何改变一个命令的根目录?我要怎样改变一个进程的根目录呢,比如用 chroot 命令将web服务与文件系统隔离?我要如何使用 chroot 恢复密 ...

  4. POJ2677 Tour(DP+双调欧几里得旅行商问题)

    Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3929   Accepted: 1761 Description ...

  5. Spring学习8-用MyEclipse搭建SSH框架 Struts Spring Hibernate

    1.new一个web project. 2.右键项目,为项目添加Struts支持. 点击Finish.src目录下多了struts.xml配置文件. 3.使用MyEclipse DataBase Ex ...

  6. 删除ECSHOP后台升级提示/下载最新补丁升级提示

    删除ECSHOP后台升级提示/下载最新补丁升级提示 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2014-05-30   删除最新补丁: v 2.7.3 releas ...

  7. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 使用prompt输入一句英文句子和排序方式（升/降），将所有单词按排序方式排序后在网页上输出

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. title及alt提示特效

    <html> <head> <title>title及alt提示特效</title> <style type="text/css&quo ...

  10. 编译安装apache下添加mod_rewrite支持

    今天我依旧在学习我的编程语言,接到同事的一个请求.说在25*服务器上添加一个apache的mod_rewrite的模块支持 感觉还好了,这个很简单,所有就开始做了.不过这个服务器已经相当久远了,一下吧 ...