Google Maps JavaScript API V3 根据地址加载地图

最新推荐文章于 2024-02-25 21:34:55 发布

weixin_33994429

最新推荐文章于 2024-02-25 21:34:55 发布

阅读量242

点赞数

文章标签： javascript xhtml ViewUI

效果图如下：
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);     } }

调用：

百度：

请求接口中有四个参数：
其中，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));
        }

weixin_33994429

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Maps JavaScript API V3 根据地址加载地图

效果图如下： javascript代码：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3...
复制链接

扫一扫