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