google map学习相关

网址:

http://my.oschina.net/u/146658/blog/36327


http://blog.csdn.net/del1214/article/details/6768605


1.注册google map获取key
http://code.google.com/intl/zh-CN/apis/maps/signup.html
android:http://code.google.com/intl/zh-CN/android/maps-api-signup.html


api:
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html#Welcome
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/tutorial.html#api_key


地图事件
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html


api v3

根据地址获取坐标

var geocoder = new google.maps.Geocoder();
geocoder.geocode( {  
    'address' : "成都市东大街下东大街段216号喜年广场B座"  
}, function(results, status) {  
    if (status == google.maps.GeocoderStatus.OK) {  
        myLatLng = results[0].geometry.location;  
        //results数组里有很多有用的信息,包括坐标和返回的标准位置信息  
        alert(myLatLng);
    } else {  
        alert('123');  
    }  
    return false;
});



一个简单的实例

引入js,有语言控制的话js后面加上&lang=en等

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>


var lat = '<?php echo $brand->latitude; ?>';//纬度
var lng = '<?php echo $brand->longitude; ?>';//经度
var language = '<?php echo $lang; ?>';


if( language == 'zh' ){
//标注点数组
var markerArr = [{title:"银杏南亭",content:"成都市人民南路四段十九号威斯顿联邦大厦1~6楼",point:"30.624845|104.0670590",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
,{title:"银杏金阁",content:"成都市锦里中路2号",point:"30.649664|104.056942",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
,{title:"银杏川菜",content:"成都市临江中路12号",point:"30.645281|104.071240",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
,{title:"银杏春天",content:"成都市二环路西二段19号春天广场A座1-2楼",point:"30.664287|104.021352",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
,{title:"银杏东禧",content:"成都市东大街下东大街段216号喜年广场B座1、3楼",point:"30.648772|104.086188",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
];
}else{
//标注点数组
var markerArr = [{title:"GINGKO NANTING",content:"成都市人民南路四段十九号威斯顿联邦大厦1~6楼",point:"30.624845|104.0670590",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
,{title:"GINGKO JINGE",content:"成都市锦里中路2号",point:"30.649664|104.056942",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
,{title:"GINGKO SICHUAN",content:"成都市临江中路12号",point:"30.645281|104.071240",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
,{title:"GINGKO SPRING",content:"成都市二环路西二段19号春天广场A座1-2楼",point:"30.664287|104.021352",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
,{title:"GINGKO DONGXI",content:"成都市东大街下东大街段216号喜年广场B座1、3楼",point:"30.648772|104.086188",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
];
}


var myLatLng;
var map;


function initialize(lat, lng){
myLatLng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 12,
maxZoom: 16,
minZoom: 8,
zoomControlOptions: {position:google.maps.ControlPosition.TOP_LEFT,style:google.maps.ZoomControlStyle.LARGE},
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('dituContent'), myOptions);

addMarker();
}


//添加marker
function addMarker(){
for( var i = 0; i < markerArr.length; i++ ){
var jsonData = markerArr[i];
var marker = createMarker(jsonData);
}
}


//创建marker
function createMarker(jsonData){
var mlat = jsonData.point.split("|")[0];
var mlng = jsonData.point.split("|")[1];
var latLng = new google.maps.LatLng(mlat, mlng);
var marker = new google.maps.Marker({
position: latLng, 
  map: map
});


var infowindow = new google.maps.InfoWindow({content: "<b class='iw_poi_title' title='" + jsonData.title + "'>" + jsonData.title + "</b><div class='iw_poi_content'>"+jsonData.content+"</div>"});

google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.open(map, marker);
});

    google.maps.event.addListener(marker, 'mouseout', function () {
        infowindow.close();
    });
    
return marker;
}


initialize(lat, lng);


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值