android google v3地图简单demo

来源：互联网发布：c语言中buffer 编辑：程序博客网时间：2024/05/17 20:30

谷歌地图v3版开发简单demo，用在android里，v1已经废止，v2又无法正常使用，在使用过程中各种问题，申请apikey无法使用，也不知道啥原因，这里使用v3版本，v3是web版的，于是在android项目里加了一个WebView控件，来加载这个页面，页面代码如下：仅供参考

<html>

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;//地图
var geocoder = new google.maps.Geocoder();//坐标解析
var infoWindow; //信息窗，用来显示门店信息

//重新设置地图中心位置，需要经度、纬度
function setMapCenter(lat,lng){
map.setCenter({lat: lat, lng: lng});
}

//初始化地图
function initialize() {
var myLatlng = new google.maps.LatLng(22.27,114.39);
var mapOptions = {
zoom: 5,
center: myLatlng
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

//创建可拖动图标
function creatDragMarker(lat,lng,titleInfo){
var img='icon_now.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,

title: titleInfo,

//draggable属性控件是否可以拖动

draggable:true,
icon:img
});

//创建一个信息提示框，titleInfo就是要显示的信息

var infowindow = new google.maps.InfoWindow(
{ content: titleInfo,
maxWidth: 200

});

//给marker添加click事件

google.maps.event.addListener(marker, 'click', function() {

//调用open(map,markder)方法显示提示框

infowindow.open(map,marker);
});

//给可移动的marker添加dragend事件，在移动结束后执行，将marker的位置信息带过去

google.maps.event.addListener(marker, 'dragend', function() {
geocodePosition(marker.getPosition());
});
}

//解析图标的位置、经纬度
function geocodePosition(pos) {
geocoder.geocode({latLng: pos}, function(responses) {
if (responses && responses.length > 0) {
var lng=pos.lng();
var lat=pos.lat();
var address=responses[0].formatted_address;
// alert(lng+","+lat+","+address);
//调用android代码，设置门店位置详情
htcms.setStoreAddress(lat,lng,address);

} else {
alert('无法确定地址在这个位置。');
}
});

}

//创建图标 lng 经度 lat 纬度 titleInfo
function creatMarker(lat,lng,titleInfo,isCurrentStore,storeId){

var marker;
//点击标题引发的事件，保存门店信息
if(isCurrentStore==1){
//未关联的门店，点击图标显示出来门店信息，点击门店信息可以设置为关联门店
titleInfo='<div onClick="htcms.setStore('+storeId+')">'+titleInfo+'</div>';
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: titleInfo
});
}else{
//当前门联的门店，点击图标只显示门店信息
//当前关联的门店图标要特殊图片
var img='icon_now.png';
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: titleInfo,
icon:img
});
}

//google 地图显示信息窗
var infowindow = new google.maps.InfoWindow(
{ content: titleInfo,
maxWidth: 200
});

//给每个图标绑定一个事件，点击显示一个信息框
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

//初始化地图
google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>

<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

0 0