如何在Google Maps 添加多个标记
JS如下：
(function() {
window.onload = function() {
// Creating an object literal containing the properties
// we want to pass to the map
var options = {
zoom: 12,
center: new google.maps.LatLng(40.7257, -74.0047),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map'), options);
// Adding a marker to the map
// for New York, San Francisco, and Seattle
var places = [];
// Adding a LatLng object for each city
places.push(new google.maps.LatLng(40.756, -73.986));
places.push(new google.maps.LatLng(37.775, -122.419));
places.push(new google.maps.LatLng(47.620, -122.347));
// Looping through the places array
for (var i = 0; i < places.length; i++) {
// Creating a new marker
var marker = new google.maps.Marker({
position: places[i],
map: map,
title: 'Place number '
+ i
});
}
};
})();
CSS如下：
body
{
font-family:
Verdana,
Geneva,
Arial,
Helvetica,
sans-serif;
font-size:
small;
background:
#fff;
}
#map
{
width:
100%;
height:
500px;
border:
1px
solid
#000;
}
.info
{
width:
250px;
}
HTML如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My first map</title>
<link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
</head>
<body>
<h1>My first map</h1>
<div id="map"></div>
</body>
</html>
效果如下：
如何在Google Maps 添加多个标记的更多相关文章
- 如何在Google Map中处理大量标记(ASP.NET)(转)
如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...
- google maps js v3 api教程(2) -- 在地图上添加标记
原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...
- Google Maps API V3 之绘图库 信息窗口
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google maps library的使用
公司的项目中用到了google地图API, 使用Google API开发就会用到Marker, 用来在google 地图上标注位置 但是google marker使用过程中也有个问题,就是如果在goo ...
- 如何在 Google 地图中添加标记和说明
JS如下: (function() { window.onload = function() { // Creating an object literal containin ...
- Google Maps API V3 之 图层
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps API V3 之 路线服务
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- google maps js v3 api教程(3) -- 创建infowindow
原文地址 前面我们学习了地图和标记的创建.那么今天我们来学习怎样在地图上显示一个窗口(infowindow) infowindow构造函数为:InfoWindow(opts?:InfoWindowOp ...
- Google Maps API显示地图的小示例
来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...
随机推荐
- Linux安装zookeeper集群
一．单机部署: ①下载.解压 http://archive.apache.org/dist/zookeeper/ tar -zxf zookeeper-3.4.10.tar.gz -C /usr/lo ...
- 网络编程[第二篇]基于udp协议的套接字编程
udp协议下的套接字编程 一.udp是无链接的 不可靠的 而上篇的tcp协议是可靠的,会有反馈信息来确认信息交换的完成与否 基于udp协议写成的服务端与客户端,各司其职,不管对方是否接收到信息, ...
- python — 函数基础知识(一)
目录 1 面向过程编程与函数式编程 2 函数的基本结构 3 函数的参数 1 面向过程编程与函数式编程 截至目前我们所接触.所写的编程为:面向过程式编程[可读性差/可重用性差] # 面向过程编程 use ...
- 玩linux笔记——持续更新
说在最前面 centos 是基于redhat linux,所以最好的教程在红帽官网 https://access.redhat.com/documentation/en-us/red_hat_ente ...
- Java基础之IO和NIO补完
Java Stream,File,IO 关于NIO和IO的比较,参考:Java NIO系列教程(十二) Java NIO与IO java包之java.io 参考材料:菜鸟教材 NIO 由于下面的系列教 ...
- java实现4种内部排序
两种插入类排序: 直接插入排序: public static void insertSort(int[] arr, int len){ for(int i=1; i<len; i++){ int ...
- poj 3468 整理一下线段树的写法
// 对于延迟更新,我们在updata 和query的时候 pushdown和pushup两个东西都要存在 #include <iostream> #include <cstdio& ...
- 按Excel的模板导出数据
思路:把Excel模板上传到服务器:然后读取文档,写入数据,另存为新的文件 然后就是导出的时候处理数据定义的字符串,按数据导出:注意读取的数据流要处理下,不然会报异常 public Stream Ge ...
- vue添加图片
首先开始创建一个 static 文件夹用来保存图片 去 setting 里面进行配置 MEDIA_ROOT = os.path.join(BASE_DIR,'media') #前面大写的是死格式,尽量 ...
- vue学习（7）-路由抽离
cnpm i vue-router -S