原文链接

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. codeforces 288A：Polo the Penguin and Strings

    Description Little penguin Polo adores strings. But most of all he adores strings of length n. One d ...

  2. Longest Increasing Common Subsequence (LICS)

    最长上升公共子序列(Longest Increasing Common Subsequence,LICS)也是经典DP问题,是LCS与LIS的混合. Problem 求数列 a[1..n], b[1. ...

  3. 自动打包iOS项目

    基于Lexrus的博文iOS-makefile,本文对自动打包涉及到的操作步骤以及理论基础进行了适当的补充.     请在阅读本文前先阅读<iOS makefile>.文章地址:http: ...

  4. linux下的三种解压文件的命令？

    那要看你的压缩文件使用哪种压缩方式:gzip,压缩文件名:zip或gz,解压命令:unzipbzip2,压缩文件名:bz,解压命令:bzip2 -d上面两个是最常用的压缩方式,一般在linux下可以通 ...

  5. Windows下绘制数学函数图像的方法

    一.安装相关软件 在Windows中安装VirtualBox: 在VirtualBox中安装Ubuntu Server: 在Ubuntu Server中安装cifs-utils:sudo apt-ge ...

  6. Writing the first draft of your science paper — some dos and don’ts

    Writing the first draft of your science paper — some dos and don’ts 如何起草一篇科学论文?经验丰富的Angel Borja教授告诉你 ...

  7. [LeetCode] Word Ladder II

    Given two words (start and end), and a dictionary, find all shortest transformation sequence(s) from ...

  8. ios开发 网络编程浅析（一）

    iphone包含了很多框架和库,从底层的套接字到不同层次的封装,可以方便地给程序添加网络功能. (1)BSD套接字.最底层的套接字,这是Unix网络开发常用的API.如果从其他系统移植程序,而程序用的 ...

  9. visual studio 2010 破解版 破解方法

    1.Microsoft Visual Studio 2010下载(均来自微软官网) 高级版(Premium) [建议下载]       http://download.microsoft.com/do ...

  10. 看过《大湿教我写.net通用权限框架(1)之菜单导航篇》之后发生的事（续）——主界面

    引言 在UML系列学习中的小插曲:看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 在上篇中只拿登录界面练练手,不把主界面抠出来,实在难受,严重的强迫症啊.之前一直在总 ...