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

简介:

效果图如下: 
             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);     } }
复制代码

调用:

复制代码
<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));
        }
复制代码


    本文转自曾祥展博客园博客,原文链接: http://www.cnblogs.com/zengxiangzhan/archive/2011/08/29/2157206.html ,如需转载请自行联系原作者

相关文章
|
2月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
207 0
|
2月前
|
JavaScript 前端开发
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
26 1
|
19天前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
22 0
|
23天前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
30 0
|
2月前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
2月前
|
分布式计算 Kubernetes 监控
容器服务Kubernetes版产品使用合集之registry.aliyuncs.com/google_containers 镜像仓库的地址是什么
容器服务Kubernetes版,作为阿里云提供的核心服务之一,旨在帮助企业及开发者高效管理和运行Kubernetes集群,实现应用的容器化与微服务化。以下是关于使用这些服务的一些建议和合集,涵盖基本操作、最佳实践、以及一些高级功能的使用方法。
248 0
|
2月前
|
设计模式 前端开发 JavaScript
AngularJS是一款由Google收购的JavaScript结构框架
【5月更文挑战第2天】AngularJS是Google收购的JavaScript框架,用于构建动态Web应用,基于MVC模式,强调模块化和双向数据绑定。它简化了视图与模型的同步,通过语义化标签和依赖注入提升开发效率。适用于复杂单页面应用(SPA),但不适合DOM操作密集型或性能要求极高的场景。
44 0
|
2月前
|
数据采集 分布式计算 DataWorks
DataWorks产品使用合集之DataWorks数据地图中的数据发现相关api接口调用如何解决
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
35 0
|
2月前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架,用于开发 Web 应用程序。它们分别提供了不同的功能和特性,以帮助开发者更高效地构建和维护 Web 应用程序。
30 2
|
2月前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
244 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用