<!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. java_数组作缓存池的不可变类实例

    package ming; public class CacheImmutale { private static int MAX_SIZE = 10; private static CacheImm ...

  2. Java中的DeskTop类

        在Jdk1.6以后新增加了一个类--DeskTop,在JDK中它的解释是这样的: The Desktop class allows a Java application to launch a ...

  3. Redis 哈希(Hash)

    Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). 实例 red ...

  4. super 和this的用法

    class Person { public static void prt(String s) { System.out.println(s); // 打印出来结果 } Person() { prt( ...

  5. coherence初识

    近期,发现在预发布环境上的项目有些冲突,本着治病救人的原则,不得已要一步步剖析,苦逼的就是我们可爱可敬的程序员. 先介绍下大体情况,应用项目都是velocity+spring+mybatis,没什么好 ...

  6. Windows环境下安装导入tornado

    首先,一台安装并配置好了python,我的python版本的肯定是2.7,直接进入tornado的环节: 下载tornado的压缩包,我的下载地址为:https://codeload.github.c ...

  7. LeetCode 268

    Missing Number Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one ...

  8. saltstack实战3--配置管理之YAML语法

    本文来自如下链接http://docs.saltstack.cn/topics/yaml/index.html 了解YAML 默认的SLS文件的renderer是YAML renderer.YAML是 ...

  9. RedirectFromLoginPage和FormsAuthenticationTicket的区别

    如果你对.net身份验证不是很清晰,请看本文.本文用简单明了的语言,让你对RedirectFromLoginPage和FormsAuthenticationTicket有一个完整的认识. 1)Form ...

  10. Android第三方授权(新浪微博篇)

    Android第三方认证新浪微博,相对微信,也比较简单,并且sina给了一个sdk和sdkdemo,这个demo封装了许多,但是自己不准备记录这个demo,而是直接使用sdk 同样去sina官方下载s ...