您的位置：首页 > 编程语言 > Go语言

使用google map v3 api 开发地图服务

2011-09-12 10:29 417 查看



API学习地址

其实google map的api很简单的，这里是学习文档的传送门http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/articles.html

代码的一些实例

可以国际化的google map

<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=语言-国家缩写">
</script>
在language后面写上语言国家缩写就可以国际化google map了



Map类

初始化地图的方法：

var myOptions = {
zoom : 11,
center : new google.maps.LatLng(30.1234567,120.3456789),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mainMapLayer"),myOptions);

1、center是指地图定位的坐标，需要LatLng对象，对象参数就是纬度和经度

2、mapTypeId是类似枚举的东西，详细参考api

3、mainMapLayer是我的地图div对象的id名，这个div要指明高度和宽度要不地图没法初始化

Marker类、InfoWindow类

添加自定义的marker：

var userMarker = new google.maps.Marker( {
position : new google.maps.LatLng(30,120),
map : map,
title : "鼠标悬浮时提示的信息",
icon : "图片位置字符串"
});
var yourInfoWindow;

(function(userMarker) {
google.maps.event.addListener(userMarker, 'click', function() {
if (!yourInfoWindow) {
yourInfoWindow = new google.maps.InfoWindow( {});
}
yourInfoWindow.setContent(userMarker.title);
yourInfoWindow.open(map, userMarker);
});
})(userMarker);


1、Marker类是为地图上添加类似小图钉似的提示位置用的东西

2、Marker需要设置坐标和地图对象来初始化

3、同一个Marker对象要重用时使用下面语句重新使用

userMarker.setMap(null);
4、最后是为marker对象添加点击事件，使用的是嵌套写法（用在for循环里更好使）

5、infowindow是弹出的那个大窗体，他的setContent方法是支持html和css代码的，可以放进去div或table设置样式

LatLngBounds类

Map范围自适应：

var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(30,120));
//为新的结果创建marker
for ( var i in member) {
bounds.extend(new google.maps.LatLng(member[i][2],member[i][3]));
var marker = new google.maps.Marker( {
position : new google.maps.LatLng(member[i][2],	member[i][3]),
map : map,
title : "title",
icon : "imageAddress"
});
markers.push(marker);
//为marker添加infowindow，添加点击事件
(function(i, marker) {
google.maps.event.addListener(
marker,
'click',
function() {
if (!infoawindow) {//单例infowindow
infoawindow = new google.maps.InfoWindow(
{});
}
infoawindow.open(map, marker);
});
})(i, marker);
}
map.fitBounds(bounds);//这句最重要




[b]Geocoder类

提交地址字符串返回经纬度（很好用的功能），查询全靠它

var geocoder = new google.maps.Geocoder();
geocoder.geocode( {
'address' : "格式可以是不分割的：北京市东城区东直门，或北京市,东城区,东直门"
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myLatLng = results[0].geometry.location;
//results数组里有很多有用的信息，包括坐标和返回的标准位置信息
} else {
alert(interGeoAnalysisFailed);
}
});


地图导航服务

var map;	//地图对象
var mode = google.maps.DirectionsTravelMode.DRIVING;	//谷歌地图路线指引的模式
var directionsDisplay = new google.maps.DirectionsRenderer();	//地图路线显示对象
var directionsService = new google.maps.DirectionsService();	//地图路线服务对象
var directionsVisible = false;	//是否显示路线
directionsDisplay.setMap(null);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));	//将路线导航结果显示到div中
var request = {origin: findLatLng, destination: marker.position, travelMode: mode, optimizeWaypoints: true, avoidHighways: false,avoidTolls: false};
directionsService.route
(
request,
function(response, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
}
);
directionsVisible = true;


[/b]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航