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

根据地址获取坐标

一个简单的实例

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

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);

google map学习相关相关推荐

Google Map API学习1
这一段时间公司一个新产品上线, 做超市代购的这样,就需要计算每个门店也就是超市,距离小区之间的距离. 我们用的是Google Map 1.批量对地址进行编码,也就是将地址批量转化成对应的Goole ...
Android特色开发之Google MAP
本文节选于机械工业出版社推出的<Android应用开发揭秘>一书,作者为杨丰盛.本书内容全面,详细讲解了Android框架.Android组件.用户界面开发.游戏开发.数据存储.多媒体开发 ...
类型缩放Google map 地图类型
上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下类型缩放舆图类型基本舆图类型 45° 图像启用和停用 45° 图像旋转 45° 图像修改舆图类型注册表样 ...
06.图像识别与卷积神经网络------《Tensorflow实战Google深度学习框架》笔记
一.图像识别问题简介及经典数据集图像识别问题希望借助计算机程序来处理.分析和理解图片中的内容,使得计算机可以从图片中自动识别各种不同模式的目标和对象.图像识别问题作为人工智能的一个重要领域,在最近几 ...
Android传感器、语音识别、定位系统、Google Map API、快捷方式、widget编程总结及示例
Android特色开发第一部分传感器传感器是一种物理装置或生物器官,能够探测.感受外界的信号.物理条件(如:光.热.湿度)或化学组成(如:烟雾),并将探知的信息传递给其他设备或器官. ...
Android传感器、语音识别、定位系统、Google Map API、快捷方式、widget编程总结及示例...
Android特色开发第一部分传感器传感器是一种物理装置或生物器官,能够探测.感受外界的信号.物理条件(如:光.热.湿度)或化学组成(如:烟雾),并将探知的信息传递给其他设备或器官. Andro ...
2021年在vue中使用 Google Map
目前在vue中使用google map有以下两种方法: 一.使用 JavaScript 创建地图实例该方法优点在于可配置项多,方便自定义,缺点是较复杂,且文档为英文,有一定学习难度. 在开始之前确保 ...
Google Map开发之实战
视频课:[免费]跨平台APP JQuery Mobile开发-1-初探移动开发-张晨光的在线视频教程-CSDN程序员研修院学习内容 Google Map服务简介获取Google Map API K ...
交通运输相关机器学习/深度学习相关资源列表，关于交通运输场景的机器学习/深度学习的资源这里都有
本文素材来源于GitHub,经本人翻译及整理首发于CSDN,仅供技术交流所用,请勿商用.欢迎大家关注我的公众号: gbxiao992 原文地址:https://github.com/zzsza/Awe ...

google map学习相关

google map学习相关相关推荐

最新文章

热门文章