<!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. URI--http://zh.wikipedia.org/wiki/%E7%BB%9F%E4%B8%80%E8%B5%84%E6%BA%90%E6%A0%87%E5%BF%97%E7%AC%A6

    维基百科,自由的百科全书     在电脑术语中,统一资源标识符(Uniform Resource Identifier,或URI)是一个用于标识某一互联网资源名称的字符串. 该种标识允许用户对网络中( ...

  2. 【Remoting-4】

    [服务对象三种激活方式的不同] [1]客户端激活方式 [A]对象的创建,对象方法的执行都是在远程服务端. [B]服务端为每一个客户端创建其专属的对象,为这个客户提供服务,并且保存状态 [C]可以从远程 ...

  3. 从汇编看c++的虚拟继承以及其内存布局(一)

    先看第一种最简单的情形,所有类中没有任何虚函数的菱形继承. 下面是c++源码: class Top {//虚基类 public: int i; Top(int ii) { i = ii; } }; c ...

  4. python 调用shell或windows命令

    目前使用到的有两种方式:os.system()和os.popen() import os os.system('cd e:cjx') #调用后返回执行结果状态 如果想获得返回结果,则使用以下方式: i ...

  5. Number Steps

    Number Steps Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  6. 体验下Xcode5与ios7

    IOS7的最新更新. 1.自主选择默认地图应用苹果在iOS 6中移除了谷歌地图,使用了自家研发的苹果地图.不得不说,这款自带的地图应用可以说烂到了一定的程度,自发布之后便问题不断.正因如此,苹果应该允 ...

  7. vmware配置安装JDK、Tomcat以及项目部署

    1.安装JDK1.7 JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 安 ...

  8. HDU 1796 Howmany integers can you find (容斥原理)

    How many integers can you find Time Limit: 12000/5000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  9. linux底半部机制在视频采集驱动中的应用

    最近在做一个arm+linux平台的视频驱动.本来这个驱动应该是做板子的第三方提供的,结果对方软件实力很差,自己做不了这个东西,外包给了一个暑期兼职的在读博士.学生嘛,只做过实验,没做过产品,给出的东 ...

  10. 【C/C++】Linux下system()函数引发的错误

    http://my.oschina.net/renhc/blog/54582 [C/C++]Linux下system()函数引发的错误 恋恋美食  恋恋美食 发布时间: 2012/04/21 11:3 ...