谷歌地图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>
<!--<input type="text" id="store_name" />
<input type="button" value="查询" οnclick="htcms.searchStore()" />-->
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>