<!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. AngularJS - Apply方法监听model变化

    <body> <div ng-app="myApp"> <div ng-controller="firstController" ...

  2. Spark之路 --- Windows Scala 开发环境安装配置

    JDK安装 JDK安装包下载 到Oracle官网下载JDK. 传送门 下载之前要记得勾选上同意协议然后选择相应的版本(Windows/Linux, 32/64) JDK安装及验证 按提示完成安装,安装 ...

  3. 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "StdAfx.h"”?

    在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#include "StdAfx.h"”? 右键选择该文件.cpp格式的->属性->预编译头,→ 不使用预编译 ...

  4. css笔记02：选择器（标签式和类）

    body { margin:; padding:; background:#000 url('images/backgrounds/star.png') no-repeat fixed; font: ...

  5. Python学习笔记 第二课 循环

    >>> movies=["The Holy Grail", 1975, "The Life of Brian", 1979, "Th ...

  6. Windows 平台下Git 服务器搭建

    由于项目中一直在使用git作为版本管理,自己对git的理解.使用都还不是怎么的熟悉,所以准备深入了解一下git及一些常用命令的使用,于是干脆把服务端架上,通过自己的PC作为服务端同时作为客户端的角色进 ...

  7. [BigData]关于Hadoop学习笔记第二天(PPT总结)(一)

    Plan: 分布式文件系统与HDFS HDFS体系结构与基本概念 HDFS的shell操作 java接口及常用api HADOOP的RPC机制 HDFS源码分析 远程debug 自己设计一分布式文件系 ...

  8. poj 3352 边连通分量

    思路与poj3177一模一样. #include<iostream> #include<cstdio> #include<cstring> #include< ...

  9. Servlet之过滤器

    Servlet的介绍: Servlet API 中定义了三个接口类来开供开发人员编写 Filter 程序:Filter, FilterChain, FilterConfig Filter 程序是一个实 ...

  10. jQuery 自定义事件的学习笔记

    jquery中提供了两种方法可以绑定自定义事件: bind()和one()而绑定的自定义事件的触发,必须得用jquery中的trigger()方法才能触发. 我们先来看on事件  代码如下 复制代码 ...