我們使用 Google Maps Javascript API V3 來測試地址定位
Reference
- http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/services.html#GeocodingRequests
- 資訊視窗 demo demo2
接著來模擬 google map 的地址定位
(一)直接使用文字編輯器來撰寫
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(24.98367,121.453586);
var myOptions = {
zoom: 14,
center: latlng,
draggable:true,
clickable:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
var marker = null;
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
visible:true
});
var infowindow = new google.maps.InfoWindow({
content:address
});
infowindow.open(map,marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="" style="width:300px">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
<div id="map_canvas" style="width: 800px; height: 600px;"></div>
</body>
</html>
執行結果畫面
(二) 使用 Asp.net 來完成
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="Test._Default" %>
<!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 runat="server">
<title>測試地址定位</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script>
<style type="text/css">
html { height: 100% ;width:100% } body { height: 100% ;width:100%;margin: 0px; padding: 0px }
#map_canvas { height: 100% ;width:100%} </style>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(24.98367,121.453586);
var myOptions = {
zoom: 14,
center: latlng,
draggable:true,
clickable:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
var marker = null;
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
visible:true
});
var infowindow = new google.maps.InfoWindow({
content:address
});
infowindow.open(map,marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div>
<div>
<input id="address" type="text" value="" style="width: 300px" />
<input type="button" value="Encode" onclick="codeAddress()" />
</div>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</div>
</form>
</body>
</html>
執行結果
HEMiDEMi 的標籤：GoogleMaps
沒有留言:
張貼留言