<!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. truncate 与 delete 的区别

    Delete删除的数据可以通过日志文件进行恢复 Truncate Table删除的数据不能进行恢复 Delete删除时,标识列取值保留原使用中最大值 Truncate Table删除时,标识列恢复到最 ...

  2. mysql的二级索引

    mysql中每个表都有一个聚簇索引(clustered index ),除此之外的表上的每个非聚簇索引都是二级索引,又叫辅助索引(secondary indexes). 以InnoDB来说,每个Inn ...

  3. Linux 进程管理剖析--转

    地址:http://www.ibm.com/developerworks/cn/linux/l-linux-process-management/index.html Linux 是一种动态系统,能够 ...

  4. Windows Service 之 详解（一）

    一.Windows 服务简介 Windows 服务是可以在系统启动时自动打开的(不需要任何人登录计算机)的程序. 1.适合创建Windows 服务的场景: [1] 在没有用户交互操作的情况下运行程序: ...

  5. 10891 - Game of Sum

    Problem EGame of SumInput File: e.in Output: Standard Output This is a two player game. Initially th ...

  6. DOM+Javascript一些实例

    1.内容+遮罩层+悬浮对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. CentOS(十)--与Linux文件和目录管理相关的一些重要命令②

    在结束了第二期的广交会实习之后,又迎来了几天休闲的日子,继续学习Linux.在上一篇随笔 Linux学习之CentOS(十七)--与Linux文件和目录管理相关的一些重要命令① 中,详细记录了与Lin ...

  8. python爬虫爬取全球机场信息

    --2013年10月10日23:54:43 今天需要获取机场信息,发现一个网站有数据,用爬虫趴下来了所有数据: 目标网址:http://www.feeyo.com/airport_code.asp?p ...

  9. hdu 4417 划分树

    思路:二分枚举区间第k大.用划分树查找是否符合要求的高度. #include<iostream> #include<algorithm> #include<cstdio& ...

  10. Servlet & JSP - Servlet API Overview

    Servlet & Generic & HttpServlet 类图 Servlet 的生命周期 init.service 和 destroy 是 servlet 的生命周期方法,它们 ...