google map 点与点画线 

<!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>

　　

posted @ 2015-07-30 09:32  Adtuu  阅读(662)  评论(0)    收藏  举报