效果图如下：
javascript代码：
<!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>
无标题文档
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var geocoder;
var map;
var query = "香港 湾仔 维多利亚公园";
var display = "<b>单位：</b> 维多利亚公园";
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}
function codeAddress() {
var address = query;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infowindow = new google.maps.InfoWindow({
content: "<b>地址：</b>" + address + "<br>" + display
});
infowindow.open(map, marker);
} else {
alert("未能解析该地址的原因: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:400px">
</div>
</body>
新封装版本：
var map; var geocoder = new google.maps.Geocoder(); /** *-25.363882,131.044922 *初始地图 */
function initialize(lat1, lng1, zoom, canvas_div) { var myLatlng = new google.maps.LatLng(lat1, lng1); var myOptions = { zoom: zoom, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById(canvas_div), myOptions); } //根据坐标点 mark 标记 在初始地图时function placeMarker(latLng,html) { var marker = new google.maps.Marker({ position: latLng, map: map, cursor: "1", flat: true, draggable: false, clickable: true, visible: true }); map.setCenter(latLng); var infowindow = new google.maps.InfoWindow({ content: html }); // infowindow.setPosition(latLng); infowindow.open(map, marker); }
//根据地址获取坐标function codeAddress(latitude, longitude,html, address, Fun) { if (0 == latitude || 0 == longitude) { if (geocoder) { geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { Fun(results[0].geometry.location, html); } else {
Fun(latLng,html); //.return false; //alert("Geocode was not successful for the following reason: " + status); } }); } } else { placeMarker(new google.maps.LatLng(latitude, longitude),html); } }
调用：
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="Scripts/gmap.js" type="text/javascript"></script>
$(function () {
initialize('0.000000', '0.000000', 16, 'map_canvas');
var html = 'xxx';
codeAddress('0.000000', '0.000000',html, addr, placeMarker);
});
百度：
请求接口中有四个参数：
其中，from和to对应的值分别是：0真实坐标；2google坐标；4baidu坐标。
from：被转换的坐标体系
to：转换到这个坐标体系
x：经度
y：纬度
//GPS经纬度转换为百度坐标
//gps: http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x=lng&y=lat
//google: http://api.map.baidu.com/ag/coord/convert?from=2&to=4&x=lng&y=lat
//例子： http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x=116.397428&y=39.90923
string s = bind("MTE2LjQxMDA0OTUwNTY2", "MzkuOTE2OTc5NTE5ODcz");
//116.41004950566,39.916979519873
protected string bind(string a,string b)
{
return Base64Decode(a) + "," + Base64Decode(b);
}
public static string Base64Encode(string AStr)
{
return Convert.ToBase64String(Encoding.UTF8.GetBytes(AStr));
}
public static string Base64Decode(string ABase64)
{
return Encoding.UTF8.GetString(Convert.FromBase64String(ABase64));
}
