Google地圖標註與自訂圖示標註
(前言 待補)
自訂標示圖案
改二個地方：
1．Map.html
<script>
var m1 = new google.maps.LatLng(24.1564125, 120.6779761); //台中市北區英才路102巷61號
var m2 = new google.maps.LatLng(24.1564069, 120.676978); //台中市北區大雅路100號
var marker;
var map;
var image = 'taxi-icon.png';//image變數指向計程車圖示檔案，圖示檔案請放在相同目錄
function mark(lat, log){//標註座標函式，由C#端呼叫，傳進經度與緯度…
var m = new google.maps.LatLng(lat, log);
marker = new google.maps.Marker({
map:map, draggable:true,
position: m,
icon: image //指定標示圖案為image
});
2．在目錄中放入圖案檔(用GOOGLE找可用的圖片檔)
參考資料：
https://developers.google.com/maps/documentation/javascript/overlays#Markers
[C#端程式碼]
public Form1(){
InitializeComponent();
if (File.Exists(AppDomain.CurrentDomain.BaseDirectory + "map.html")){
Uri uri = new Uri("file:///" + AppDomain.CurrentDomain.BaseDirectory + "map.html");
webBrowser1.Navigate(uri);
}
}
private void button1_Click(object sender, EventArgs e){
Object[] obj = new Object[2];
obj[0] = (Object) Convert.ToDouble(lat.Text);
obj[1] = (Object) Convert.ToDouble(log.Text);
//上面的程式將經度與緯度的資料包裝在obj陣列中，以做為參數傳遞給mark函式
webBrowser1.Document.InvokeScript("mark", obj);//呼叫map.html中的mark函式
}
[map.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var m1 = new google.maps.LatLng(24.1564125, 120.6779761); //台中市北區英才路102巷61號
var m2 = new google.maps.LatLng(24.1564069, 120.676978); //台中市北區大雅路100號
var marker;
var map;
var image = 'taxi-icon.png';//image變數指向計程車圖示檔案，圖示檔案請放在相同目錄
function mark(lat, log){//標註座標函式，由C#端呼叫，傳進經度與緯度…
var m = new google.maps.LatLng(lat, log);
marker = new google.maps.Marker({
map:map,
draggable:true,
position: m,
icon: image //指定標示圖案為image
});
}
function initialize() {
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: m1
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
position: m1
});
marker = new google.maps.Marker({
map:map,
draggable:true,
position: m2
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
</body>
</html>
Comments