<!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. ckfinder动态指定上传路径

    默认情况下无法用代码修改config.ascx中的BaseUrl设置,因为其后端代码ConfigFile中并没有提供修改BaseUrl的方法,这里我借用了fckeditor以前的用法:利用sessio ...

  2. Weblogic 10.3.6 在RHEL5.4 下安装

    一WebLogic简介 webserver是用来构建网站的必要软件.可用来解析.发布网页等功能,它是用纯java开发的.weblogic本来不是由bea发明的,是它从别人手中买过来,然后再加工扩展.B ...

  3. 移植最新u-boot（裁剪和修改默认参数）之韦东山笔记

    1.下载.建立source insight工程.编译.烧写.如果无运行分析原因 tar xjf u-boot-2012.04.01.tar.bz2 cd u-boot-2012.04.01 make ...

  4. PPI_network&calc_ppi

    # -*- coding: utf-8 -*- # __author__ = 'JieYao' from biocluster.agent import Agent from biocluster.t ...

  5. [改善Java代码]不能初始化泛型参数和数组

    泛型类型在编译期被擦除,我们在类初始化时将无法获得泛型的具体参数,比如这样的代码: class Foo<T>{ //private T t =new T();//报错Cannot inst ...

  6. [改善Java代码]不要在finally块中处理返回值

    在finally代码块中处理返回值,这是在面试题中经常出现的题目.但是在项目中绝对不能再finally代码块中出现return语句,这是因为这种处理方式非常容易产生"误解",会严重 ...

  7. C#入门教程（一）–.Net平台技术介绍、C#语言及开发工具介绍-打造C#学习教程

    一.什么是.Net平台? .Net平台是微软搭建的技术平台,技术人员在此平台上进行应用的搭建与开发.它提供了运行所必须的环境.NET Framework类库以及CLR(公共语言运行时).好比我们人类的 ...

  8. .NET委托与事件文章收集

    学习这方面的知识,先将文章收集着,以待以后查看. 张子阳 C# 中的委托和事件

  9. Java Servlet-http协议

    ---恢复内容开始--- 互联网三大基石: url:定位数据 html:显示数据 http:传输数据

  10. Contoso 大学 - 10 - 高级 EF 应用场景

    原文 Contoso 大学 - 10 - 高级 EF 应用场景 By Tom Dykstra, Tom Dykstra is a Senior Programming Writer on Micros ...