<!DOCTYPE html>

 <html>

 <head>

 <title>GeoLocation</title>

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

 <meta charset="utf-8">

 <style>

     html, body, #map-canvas {

         margin: 0;

         padding: 0;

         height: 100%;

     }

 </style>

 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

 <script>

     var map;

     var poly;

     function initialize() {

     var myLatlng = new google.maps.LatLng(31.1937077, 121.4158436);

     var locations = [

     ['test1, accuracy: 150m', 31.1937077, 121.4158436, 100],

     ['test2, accuracy: 150m', 31.2937077, 121.4158436, 100],

     ['test3, accuracy: 150m', 31.0937077, 121.2158436, 100],

     ['test4, accuracy: 150m', 31.3937077, 120.4158436, 100],

     ['test5, accuracy: 150m', 31.1637077, 120.4858436, 100],

     ['test6, accuracy: 150m', 31.1037077, 121.5158436, 100]

     ];

     var mapOptions = {

     zoom: 13,

     center: myLatlng,

     mapTypeId: google.maps.MapTypeId.ROADMAP

     };

     map = new google.maps.Map(document.getElementById('map-canvas'),

     mapOptions);

     // 线条设置

     var polyOptions = {

     strokeColor: '#00ff00',    // 颜色

     strokeOpacity: 1.0,    // 透明度

     strokeWeight: 4    // 宽度

     }

     poly = new google.maps.Polyline(polyOptions);

     poly.setMap(map);    // 装载

     /* 循环标出所有坐标 */

     /*for(var i=0; i<locations.length; i++){

     var loc = [];

     loc.push(locations[i][1]);

     loc.push(locations[i][2]);

         var path = poly.getPath();    //获取线条的坐标

         path.push(new google.maps.LatLng(loc[0], loc[1]));    //为线条添加标记坐标

     //生成标记图标

     marker = new google.maps.Marker({

         position: new google.maps.LatLng(loc[0], loc[1]),

         map: map

         // icon: "https://maps.gstatic.com/mapfiles/markers/marker_green.png"

     });

     }*/

     var marker, i, circle;

     var iwarray = [];

     var infoWindow;

     var latlngbounds = new google.maps.LatLngBounds();

     var iconYellow = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png");

     for (i = 0; i < locations.length; i++) {

         var loc = [];

         loc.push(locations[i][1]);

         loc.push(locations[i][2]);

             var path = poly.getPath();    //获取线条的坐标

         path.push(new google.maps.LatLng(loc[0], loc[1]));

         var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);

         latlngbounds.extend(latlng);

     if (locations[i][0].indexOf("[Cached") == 0 || (locations[i][0].indexOf("[Multiple") == 0 && locations[i][0].indexOf("[Cached") >= 0 )) {

             marker = new google.maps.Marker({

                 position: latlng,

                 map: map,

                 icon: iconYellow

             });

             var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#FF0000">' + locations[i][0] + '<font></strong><div>';

         } else {

             marker = new google.maps.Marker({

                 position: latlng,

                 map: map

             });

             var iw = '<div style="font-size: 12px;word-wrap:break-word;word-break:break-all;"><strong><font color="#000000">' + locations[i][0] + '<font></strong><div>';

         }

         iwarray[i] = iw;

         google.maps.event.addListener(marker, 'mouseover', (function(marker,i){

                 return function(){

                     infoWindow = new google.maps.InfoWindow({

                         content: iwarray[i],

                         maxWidth: 200,

                         pixelOffset: new google.maps.Size(0, 0)

                     });

                     infoWindow.open(map, marker);

                 }

             })(marker,i));

         google.maps.event.addListener(marker, 'mouseout', function() {

             infoWindow.close();

         });

         circle = new google.maps.Circle({

             map: map,

             radius: locations[i][3],

             fillColor: '#0000AA',

             fillOpacity: 0.01,

             strokeWeight: 1,

             strokeColor: '#0000CC',

             strokeOpacity: 0.8

         });

         circle.bindTo('center', marker, 'position');

     }

     map.fitBounds(latlngbounds);

     var listener = google.maps.event.addListenerOnce(map, "idle", function()

         {

         var zoomLevel = parseInt(map.getZoom());

         if (zoomLevel > 13)

             map.setZoom(13);

         });

     }

     google.maps.event.addDomListener(window, 'load', initialize);

 </script>

 </head>

 <body>

     <div id="map-canvas"></div>

 </body>

 </html>

在Google map图上做标记，并把标记相连接的更多相关文章

  1. 如何在WebGL全景图上做标记

    WebGL可以用来做3D效果的全景图呈现,例如故宫的全景图.但有时候我们不仅仅只是呈现全景图,还需要增加互动.故宫里边可以又分了很多区域,例如外朝中路.外朝西路.外朝东路等等.我们需要在3D图上做一些 ...

  2. Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

  3. 如何在Google Map中处理大量标记(ASP.NET)(转)

    如何在Google Map中处理大量标记(ASP.NET)(原创-翻译) Posted on 2010-07-29 22:04 Happy Coding 阅读(8827) 评论(8) 编辑 收藏 在你 ...

  4. Android中Google地图路径导航，使用mapfragment地图上画出线路(google map api v2)详解

    在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...

  5. Google Map API Version3 ：代码添加和删除marker标记

    转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...

  6. Swift - 使用MapKit显示地图，并在地图上做标记

    通过使用MapKit可以将地图嵌入到视图中,MapKit框架除了可以显示地图,还支持在地图上做标记. 1,通过mapType属性,可以设置地图的显示类型 MKMapType.Standard :标准地 ...

  7. Google Map 自定义 infowindow

    最近做的东西用到了infowindow,不过google提供的样式太难看了,于是想改变一下样式.看了一下好像infowindow的样式不太好改. 查了半天资料,看到一个infobox,感觉真的挺好用. ...

  8. Google Map API 应用实例说明

    目录 Google Map API 1基础知识 1.1 Google 地图 API 概念 1.2 Google 地图的"Hello, World" 1.2.1 加载 Google ...

  9. Google Map API V3开发（3）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

随机推荐

  1. ios 文字图标

    如何使用自定义字体 在讲icon font之前,首先先来看看普通自定义字体是如何在ios中使用的,两个原理是一样的.这里以KaushanScript-Regular为例: Step 1: 导入字体文件 ...

  2. commands - `ls`

    list only directories: ls -d /path/to/*/

  3. Servlet开发(一)

    一.Servlet简介 Servlet是sun公司提供的用于开发动态web资源的技术.Sun公司在其API中提供了一个Servlet接口,用户若想开发一个动态web资源(即开发一个java程序向浏览器 ...

  4. IBM Minus One(water)

    IBM Minus One Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  5. Mfgtool

    For bootstrap mode, it refers to the communcation between the host and ROM codes through serial down ...

  6. Data Mining 概念

    数据挖掘概念: 数据挖掘是在大型数据库中.自动的发现有用信息的过程. 然. 这个有用只是一个感性的东西.比如我们从表中索引一行数据.这个算不上数据挖掘.因为它依赖的是数据的明显特征. 数据挖掘基本步骤 ...

  7. js 异步流程控制之 avQ(avril.queue)

    废话前言 写了多年的js,遇到过最蛋疼的事情莫过于callback hell, 相信大家也感同身受. 业界许多大大也为此提出了很多不错的解决方案,我所了解的主要有: 朴灵 event proxy, 简 ...

  8. UI原则之-拼车

    1.简洁------------一目了然,简洁明了 2.易用------------操作方便 3.直观.快速-------快速定位到所需信息 4.友好-------网络延时.超时.等待 5.易懂--- ...

  9. 不是技术牛人，如何拿到国内IT巨头的Offer

    原地址:http://blog.csdn.net/lsldd/article/details/13506263 不久前,byvoid面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些 ...

  10. poj 1050 To the Max_dp求最大子矩阵和

    题意:求最大子矩阵和 利用dp[i]每次向下更新,构成竖起的单条矩阵,再按不小于零就加起来来更新,构成更大的矩阵 #include <iostream> #include<cstdi ...