2013年9月6日 星期五

Google Map API - 地圖標點

<!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 name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<title>遞送清單 </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css"
rel="stylesheet" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=zh-TW"></script>
<script type="text/javascript" src="http://web.systemlead.com/EasyCartAdmin/Scripts/ELabels3.js"></script>
<style type="text/css">
.site
{
border: solid 1px #000000;
padding-left: 1em;
display: block;
width: 60px;
cursor: pointer;
margin: 5px;
}
div.markerLabel
{ /*markerLabeldisplay: block;*/
text-align: center; /*background-color:white;*/ /*border:1px;*/
width: 32px;
letter-spacing: 0px;
font-size: 16px;
font-family: Arial;
color: white;
}
</style>
<script type="text/javascript">
//<![CDATA[
var geocoder;
var map = null;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(22.6253654, 120.36345639999993);
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: latlng, //new google.maps.LatLng(25.036772, 121.520269), // 設定地圖中心點
mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID,ROADMAP,SATELLITE,TERRAIN
});
map.setOptions({ draggable: false,
// zoomControl: false,
scrollwheel: false,
// disableDoubleClickZoom: true,
// streetViewControl: false,//街景
// scaleControl: false,//縮放
// panControl: false //平移功能
disableDefaultUI: true
});
//顯示中心點
ShowCenterPoint();
//顯示外送點
ShowPoint();
}
function ShowPoint() {
try {
$("[id*=address]").filter(function () {
ShowPointByAddr($(this).val(), $(this).attr('alt'));
});
}
catch (err)
{ }
}
var arySite = new Array();
function addSite(map, siteCode, siteDesc, lat, lng, address) {
var pt = new google.maps.LatLng(lat, lng);
var label = new ELabel(map,
pt,
'<div id="arrowCanvas" >' + siteDesc + '<\/div>',
'markerLabel', // null
new google.maps.Size(-15, 9)
);
label.setMap(map);
// 讓圖的圓心在點上
var icon = new google.maps.MarkerImage("http://web.systemlead.com/EasyCartAdmin/App_themes/Red/images/icons/red_circle.png",
new google.maps.Size(32, 32), // 大小
new google.maps.Point(0, 0), // 原點
new google.maps.Point(16, 16) // anchor
);
var marker = new google.maps.Marker({
map: map,
position: pt,
title: siteDesc,
icon: icon
});
}
function addSite2(map, siteCode, siteDesc, lat, lng, address) {
var pt = new google.maps.LatLng(lat, lng);
var label = new ELabel(map,
pt,
'<div id="arrowCanvas" >' + siteDesc + '<\/div>',
'markerLabel', // null
new google.maps.Size(-15, 9)
);
label.setMap(map);
// 讓圖的圓心在點上
var icon = new google.maps.MarkerImage("../../App_themes/Red/images/icons/home.png",
new google.maps.Size(32, 32), // 大小
new google.maps.Point(0, 0), // 原點
new google.maps.Point(16, 16) // anchor
);
var marker = new google.maps.Marker({
map: map,
position: pt,
title: siteDesc,
icon: icon
});
}
function ShowPointByAddr(address, orderid) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var x = results[0].geometry.location.lat();
var y = results[0].geometry.location.lng();
addSite(map, 4, orderid, x, y, address, 0, 0, '懸浮微粒', 0);
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
function ShowCenterPoint() {
var My_address = $("#txtHome").val();
geocoder.geocode({ 'address': My_address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlng = results[0].geometry.location;
map.setCenter(latlng);
// var marker = new google.maps.Marker({
// map: map,
// position: latlng
// });
addSite2(map, 4, '', latlng.lat(), latlng.lng(), My_address, 0, 0, '懸浮微粒', 0);
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
}
$(document).ready(function () { initialize(); });
//]]>
</script>
</head>
<body>
<div class="mapTitle">
<span id="lblTRAINDT">2013/08/03</span><label>
遞送清單</label></div>
<div id="map-canvas" style="width: 650px; height: 500px">
</div>
<div>
<input name="txtHome" type="hidden" id="txtHome" value="高雄市三民區建武路15號" />
<table class="mapList">
<tr>
<td>
1
<input id="address" style="width: 300px" type="hidden" value='高雄市三民區00' alt='1'>
</td>
<td>
* 0 高雄市三民區00<br />
<br />
</td>
<td>
25元
</td>
</tr>
<tr>
<td>
3
<input id="address" style="width: 300px" type="hidden" value='高雄市苓雅區00' alt='3'>
</td>
<td>
* 0 高雄市苓雅區00<br />
1.玉米濃湯, 7 * 1 = 7<br />
</td>
<td>
54元
</td>
</tr>
<tr>
<td>
5
<input id="address" style="width: 300px" type="hidden" value='高雄市苓雅區1' alt='5'>
</td>
<td>
* 0 高雄市苓雅區1<br />
<br />
</td>
<td>
90元
</td>
</tr>
<tr>
<td>
8
<input id="address" style="width: 300px" type="hidden" value='高雄市三民區TEST' alt='8'>
</td>
<td>
TEST TEST 高雄市三民區TEST<br />
1.有機石蓮花纖果, 12 * 1 = 12<br />
</td>
<td>
70元
</td>
</tr>
<tr>
<td>
10
<input id="address" style="width: 300px" type="hidden" value='高雄市三民區大順一路32號' alt='10'>
</td>
<td>
莫須有 7190888 高雄市三民區大順一路32號<br />
1.蕃茄炒蛋, 12 * 8 = 96|2.玉米濃湯, 7 * 4 = 28|3.皮蛋豆腐, 15 * 4 = 60|4.頂級洛神仙楂烏梅汁, 15 * 2 =
30|5.有機石蓮花纖果, 12 * 2 = 24<br />
</td>
<td>
391元
</td>
</tr>
<tr>
<td>
14
<input id="address" style="width: 300px" type="hidden" value='高雄市三民區和順街63-1號6F' alt='14'>
</td>
<td>
李小龍 0987654321 高雄市三民區和順街63-1號6F<br />
1.玉米濃湯, 7 * 2 = 14<br />
</td>
<td>
57元
</td>
</tr>
<tr>
<td>
15
<input id="address" style="width: 300px" type="hidden" value='高雄市三民區建工路' alt='15'>
</td>
<td>
鄭小 0755 高雄市三民區建工路<br />
<br />
</td>
<td>
52元
</td>
</tr>
<tr>
<td>
16
<input id="address" style="width: 300px" type="hidden" value='高雄市三民區建工路' alt='16'>
</td>
<td>
沈 0912345789 高雄市三民區建工路<br />
<br />
</td>
<td>
45元
</td>
</tr>
<tr>
<td>
17
<input id="address" style="width: 300px" type="hidden" value='高雄市三民區建工路一號' alt='17'>
</td>
<td>
cherie 0929456123 高雄市三民區建工路一號<br />
<br />
</td>
<td>
85元
</td>
</tr>
</table>
<div id="results" />
</div>
</body>
</html>
view raw googlemapmark.html hosted with ❤ by GitHub
on
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)