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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Map</title>

<style type="text/css">

body {

     margin: 0;

     padding: 0;

}

img {

     border-radius: 5px;

}

.image_border {

     border: 2px solid red !important;

    width: 46px !important;

    height: 54px !important;

}

#content {

     width: 800px;

     height: 1000px;

     border: 1px solid navy;

     margin: auto;

     padding: auto;

}

</style>

<script src="http://localhost/static/js/jquery-2.1.0.min.js" type="text/javascript" ></script>

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

</head>

<body>

     <div id='content'>

          <div id="map_canvas" style="width:100%; height:100%"></div>

     </div>

</body>

</html>

<script type="text/javascript">

// 地图描点列表对象

var location_list = [

     {'id':'1', 'name':'user01', 'image_url':'./image/photo_1.png', 'longitude':'-34.397', 'latitude':'150.644'},

     {'id':'2', 'name':'user02', 'image_url':'./image/photo_2.png', 'longitude':'-33.397', 'latitude':'151.644'},

     {'id':'3', 'name':'user03', 'image_url':'./image/photo_3.png', 'longitude':'-35.397', 'latitude':'150.644'}

];

/**

 *

 * 初始化

 *

*/

function initialize() {

     var mapOptions = {

       center:    new google.maps.LatLng(-34.397, 150.644), // 显示地图的中心点位置

       zoom:      8,

       mapTypeId: google.maps.MapTypeId.ROADMAP

     };

     var map = new google.maps.Map(

          document.getElementById("map_canvas"),

         mapOptions

     );

     google_maps_add_location(map);

}

/**

 *

 * 添加需要在地图上显示的点

 *

*/

function google_maps_add_location(map) {

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

          add_location(map, location_list[i]);

          add_polyline(map, location_list[0], location_list[i]);

     };

}

/**

 *

 * 添加单个地图描点

 * 并为此描点添加click事件

 *

*/

function add_location(map, location) {

     var image       = location.image_url;

     var myLatLng    = new google.maps.LatLng(location.longitude, location.latitude);

     var beachMarker = new google.maps.Marker({

          position: myLatLng,

          map:      map,

          icon:     image,

          title:    location.name,

          zIndex:   0,

          // 单独的层，可以为这个层添加CSS效果等,如果为true，此层和地图层将被视为一体

          // 比如将图片变成圆角图片 border-radius: 5px;

          optimized:false

     });

     google.maps.event.addListener(beachMarker, 'click', function(){

          alert('id:' + location.id + ', name:' + location.name);

          $('#map_canvas img').removeClass('image_border');

          $('#map_canvas img[src="./image/photo_' + location.id + '.png"]').addClass('image_border');

     });

}

/**

 *

 * 为用户画关系线

 *

 */

function add_polyline(map, current_location, object_location) {

     var flightPlanCoordinates = [

          new google.maps.LatLng(current_location.longitude, current_location.latitude),

          new google.maps.LatLng(object_location.longitude, object_location.latitude)

     ];

       var flightPath = new google.maps.Polyline({

         path: flightPlanCoordinates,

         geodesic: true,

         strokeColor: '#FF0000',

         strokeOpacity: 1.0,

         strokeWeight: 2

       });

    flightPath.setMap(map);

}

// 初始监听事件

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

</script>

　　

google map 点与点画线的更多相关文章

  1. Google Map API V3开发（1）

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

  2. 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 ...

  3. Google Map API 使用总结

    Google Map API (一):显示一个最基本的地图 1 实现一个地图:<head>中引用: <script type="text/javascript" ...

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

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

  5. Google Map JavaScript API V3 实例大全

    Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...

  6. Google Map API v2 步步为营 （二）----- Location

    接上篇. 改造一下MapsActivity: public class MapsActivity extends Activity implements LocationListener, InfoW ...

  7. 爬坑之路---Google map

    google.maps.event.adddDomListen(window, 'load', callback);当文档流中所有的dom加载完成后,执行回调函数,可以不用在script中使用defe ...

  8. 房产地图google map的初步应用点滴.4)(转)

    房产地图google map的初步应用点滴.1) 房产地图google map的初步应用点滴.2) 房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) ...

  9. Google Map API 应用实例说明

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

随机推荐

  1. UNIX基础知识之信号

    本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. 信号(signal)是通知进程已发生某种情况的 ...

  2. form表单中method的get和post区别

    一.问题的提出   <form action="getPostServlet/getPost.do?param4=param4" method="get" ...

  3. Swiper Usage&&API

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解SwiperSwiper 是一款免费以及轻 ...

  4. iOS如何随意的穿插跳跃，push来pop去

    iOS如何随意的穿插跳跃,push来pop去? 主题思想:如A.B.C.D 四个视图控制器. 想要在 A push B 后, B 在push 到 D ,然后从 D pop 到 C ,在从 C pop ...

  5. poj3295解题报告（构造、算术表达式运算）

    POJ 3952,题目链接http://poj.org/problem?id=3295 题意: 输入由p.q.r.s.t.K.A.N.C.E共10个字母组成的逻辑表达式, 其中p.q.r.s.t的值为 ...

  6. Linux 同步时间

    Linux里有2个时间: 硬件时间 系统时间 这2个时间不是同步的!如果有一天发现系统的时间不对了,可以分别看看这2个时间.硬件时间写在BIOS里,系统时间就是电脑显示的时间了. sudo hwclo ...

  7. javascript的变量、作用域和内存问题

    基本类型和引用类型的值执行环境垃圾收集 ECMAScript 变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段引用类型值指那些可能由多个值构成的对象 基本数据类型 ...

  8. mysql:学习学习~

    1.约束:分为表级约束和列级约束 包括:NOT NULL (非空约束) PRIMARY KEY(主键约束) UNIQUE KEY(唯一约束) DEFAULT(默认约束) FOREIGN KEY(外键约 ...

  9. Yii2高级版本复制新项目出现问题解决(转)

    引用于 http://www.linuxidc.com/Linux/2015-02/114116.htm Yii2高级版本复制新项目会遇到下面的报错信息: exception 'yii\base\In ...

  10. [改善Java代码]覆写equals方法时不要识别不出自己

    建议45: 覆写equals方法时不要识别不出自己 我们在写一个JavaBean时,经常会覆写equals方法,其目的是根据业务规则判断两个对象是否相等,比如我们写一个Person类,然后根据姓名判断 ...