Google Maps JavaScript API V3 根据地址 加载地图
效果图如下：
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); } }
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);
});
<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)); }
