Google Map API 使用总结
Google Map API (一)：显示一个最基本的地图
1 实现一个地图：
<head>中引用：
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Html里面合适的位置定义：
<div id="map"/>
javascript文件:
window.onload = myLoad;
function myLoad()
{
lat = 23.14746;
lng = 113.34175376;
var myLatLng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementByIdx_x("map"), myOptions);
}
说明：zoom参数是地图的范围，参数越小，地图的范围就越大
center是地图的中心点，通过经纬度定义
mapTypeId：是地图的类型。有四种map可选，MapTypeId.ROADMAP， MapTypeId.SATELLITE，
MapTypeId.HYBRID，MapTypeId.TERRAIN。
此时就可以显示中心点是（113，27）的地图了
Google Map API(二)：代码添加和删除marker标记
Google Map API :在地图 通过代添加和删除mark标记
lat = 23.14746;
lng = 113.34175376;
var myLatLng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementByIdx_x_x("map_canvas"), myOptions); var marker = new google.maps.Marker({
position: myLatLng,
title: "Hello World!"
}); marker.setMap(map);
或者直接这样定义一个marker：
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Hello World!"
});
去掉marker的操作是：
marker.setMap(null);
Google Map API (三)：给marker标记加上自定义内容
Google Map API Version3 中标记可以给marker加上任何自己的东西。
效果如下：
代码:
首先还是定义一个marker：
lat = 23.14746;
lng = 113.34175376;
var myLatLng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementByIdx_x_x_xx_x("map_canvas"), myOptions); var marker = new google.maps.Marker({
position: myLatLng,
title: "Hello World!"
}); marker.setMap(map);
然后给marker标记添加点击事件和自定义内容：
var contentString = '<div id="content">' +'<div>' +
'</div>' +
'<h1>我的标签</h1>' +
'<div id="bodyContent">' +
'<p class = "mapStyle">我的淘宝 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +
'</div>' +
'</div>'; var infowindow = new google.maps.InfoWindow({
content: contentString
}); google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
infowindow是google指定的现实内容的类，你用HTML代码初始化它就好了
mapStyle是自己定义的样式，在这里可以使用网页的css样式表
Google Map API (四)：地图控件的自定义
navigationControl：
mapTypeControl：
scaleControl：
具体定义的方式是：
lat = 23.14746;
lng = 113.34175376; var myLatLng = new google.maps.LatLng(lat, lng); var myOptions = {
zoom: 15,
center: myLatLng,
disableDefaultUI: true, //取消默认的试图
navigationControl: true, //true表示显示控件
mapTypeControl: false, //false表示不显示控件
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}; var map = new google.maps.Map(document.getElementByIdx_x("map"), myOptions);
通过这样的定义可以让控件显示或者不显示了。
空间也可以指定样式和位置，主要是通过修改Options实现：
var myOptions = {
zoom: 15,
center: myLatLng,
disableDefaultUI: true,
navigationControl: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapTypeControlOptions就是设定样式来，style是样式，google.maps.ControlPosition.TOP_LEFT是位置：
导航控件（navigationControl）可显示为以下 style 选项之一：
google.maps.NavigationControlStyle.SMALL，用于显示迷你缩放控件，其中仅限 ＋ 和 － 按钮。此样式适用于移动设备。google.maps.NavigationControlStyle.ZOOM_PAN，用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。google.maps.NavigationControlStyle.ANDROID，用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。google.maps.NavigationControlStyle.DEFAULT，会根据地图的尺寸和运行地图的设备挑选合适的导航控件。
MapType 控件可显示为以下 style 选项之一：
google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。google.maps.MapTypeControlStyle.DEFAULT，用于显示“默认”的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化。
可以定义的位置是：
TOP表示控件应沿着地图顶部中心放置。TOP_LEFT表示控件应沿着地图顶部左侧放置，控件的任何子元素“流”向顶部中心。TOP_RIGHT表示控件应沿着地图顶部右侧放置，控件的任何子元素“流”向顶部中心。BOTTOM表示控件应沿着地图底部中心放置。BOTTOM_LEFT表示控件应沿着地图底部左侧放置，控件的任何子元素“流”向底部中心。BOTTOM_RIGHT表示控件应沿着地图底部右侧放置，控件的任何子元素“流”向底部中心。LEFT表示控件应沿着地图左侧放置，位于使用TOP_LEFT定位方法放置的任何元素之下，控件的任何子元素“流”向底部。RIGHT表示控件应沿着地图右侧放置，位于使用TOP_RIGHT定位方法放置的任何元素之下，控件的任何子元素“流”向底部。
Google Map API(五)：定义路线和点击事件
你可以在Google Map添加你想添加的线，并且为线添加点击事件。
效果如下：
JS代码：
window.onload = myLoad; var poly; //折线
var infoWindowPoly; //折线显示的窗口
var map; //地图 function myLoad() {
lat = 23.14746; //位置固定，你也可以通过其他方法得到坐标
lng = 113.34175376;
var myLatLng = new google.maps.LatLng(lat, lng); //初始化一个坐标位置 var myOptions = {
zoom: 15, //缩放，数值越大地图显示的内容越具体
center: myLatLng, //地图中心点
mapTypeId: google.maps.MapTypeId.ROADMAP
}; map = new google.maps.Map(document.getElementByIdx_x_x_x_x("map"), myOptions); //根据option初始化地图 var flightPlanCoordinates = [ //添加一条线
new google.maps.LatLng(23.14746, 113.34175376),
new google.maps.LatLng(23.144, 113.345),
new google.maps.LatLng(23.149, 113.349),
];
poly = new google.maps.Polyline({ //定义线的样式
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 8
}); poly.setMap(map); //把线添加到地图 google.maps.event.addListener(poly, 'click', addLatLng); //为线添加点击事件 infoWindowPoly = new google.maps.InfoWindow(); //初始化线的弹出框
} function addLatLng(event)
{
var contentString = "<b>你点线啦</b><br />";
contentString += "点击位置: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />"; infoWindowPoly.setContent(contentString);
infoWindowPoly.setPosition(event.latLng); infoWindowPoly.open(map); //点击线的时候显示线的弹出框
}
总结代码如下：
window.onload = myLoad; var poly; //折线
var infoWindowPoly; //折线显示的窗口
var map; //地图 function myLoad() {
lat = 23.14746; //位置固定，你也可以通过其他方法得到
lng = 113.34175376;
var myLatLng = new google.maps.LatLng(lat, lng); //初始化一个坐标位置 var myOptions = {
zoom: 15, //缩放，数值越大地图显示的内容越具体
center: myLatLng, //地图中心点
disableDefaultUI: true, //不使用默认图标
navigationControl: true, //显示导航条 mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, //详细的设置可参考：http://blog.sina.com.cn/s/articlelist_1289503967_4_1.html
position: google.maps.ControlPosition.TOP_LEFT },
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP //地图类型，一共四种：可参考http://blog.sina.com.cn/s/articlelist_1289503967_4_1.html
}; map = new google.maps.Map(document.getElementById("map"), myOptions); //根据option初始化地图 var marker = new google.maps.Marker({ //添加标记
position: myLatLng,
map: map,
title: "Hello World!"
}); var contentString = '<div id="content">' + //点击标记后显示自定义的内容
'<div>' +
'</div>' +
'<h1>我的标签</h1>' +
'<div id="bodyContent">' +
'<p class = "mapStyle">我的淘宝 <a href="http://ggydggyd.taobao.com">http://ggydggyd.taobao.com</a>' +
'</div>' +
'</div>'; var infowindow = new google.maps.InfoWindow({ //根据HTML初始化infowindow
content: contentString
}); google.maps.event.addListener(marker, 'click', function () { //添加点击事件
infowindow.open(map, marker);
}); var image = 'flag.png'; //自定义marker的图标
var myLatLng = new google.maps.LatLng(23.149, 113.349);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
}); google.maps.event.addListener(beachMarker, 'click', function () { //添加点击事件
infowindow.open(map,beachMarker );
}); var flightPlanCoordinates = [ //添加一条线
new google.maps.LatLng(23.14746, 113.34175376),
new google.maps.LatLng(23.144, 113.345),
new google.maps.LatLng(23.149, 113.349),
];
poly = new google.maps.Polyline({ //定义线的样式
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 8
}); poly.setMap(map); //把线添加到地图 google.maps.event.addListener(poly, 'click', addLatLng); //为线添加点击事件 infoWindowPoly = new google.maps.InfoWindow(); //初始化线的弹出框
} function addLatLng(event)
{
var contentString = "<b>你点线啦</b><br />";
contentString += "点击位置: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />"; // Replace our Info Window's content and position
infoWindowPoly.setContent(contentString);
infoWindowPoly.setPosition(event.latLng); infoWindowPoly.open(map); //点击线的时候显示线的弹出框
}
在项目中只是用到了简单的小部分，代码：
function initialize(lo,la,idbox) {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(lo,la),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false, //屏蔽卫星
draggable: false, //禁止拖动
};
var map = new google.maps.Map(document.getElementById(idbox),
myOptions);
//machao 添加标记
var myLatLng = new google.maps.LatLng(lo,la);
var marker = new google.maps.Marker({
position:myLatLng,map:map,title:"Acura" //提示文字
});
var zoomLevel;
}
Google Map API 使用总结的更多相关文章
- Google Map API Version3 ：代码添加和删除marker标记
转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...
- Google Map API V3开发（1）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（2）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（3）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（4）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（5）
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发（6） 代码
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- 如何使用Google Map API开发Android地图应用
两年前开发过的GoogleMap已经大变样,最近有项目要用到GoogleMap,重新来配置Android GoogleMap开发环境,还真是踩了不少坑. 一.下载Android SDK Manager ...
- google map api v2的使用详细过程，图文并茂（原创）
上一篇中说到怎么获取key,下面来介绍怎么使用key来显示google地图 步骤1:eclipse上打开android SDK Manager,安装google play services. 步骤2: ...
随机推荐
- Python学习之Python简介
Python简介 Python的由来 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象.解释型计算机程序设计语言,它是吉多·范罗苏姆(Guide van ...
- java中使用 正则 抓取邮箱
我们来抓取豆瓣网的邮箱吧!把这个页面的所有邮箱都抓取下来 如https://www.douban.com/group/topic/8845032/: 代码如下: package cn.zhangzon ...
- jQuery中的事件冒泡
1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he ...
- C++之函数重载
函数重载定义: 如果同一作用域内的几个函数名字相同但形参列表不同; 重载与const形参: Record (Phone); = Record(const Phone); Record(Phone*) ...
- CSS选择器性能分析
写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑 ...
- 用构造函数创建对象时的this的指向问题
用构造函数方式创建对象: function Person(name,age){ this.name=name; this.age=age; this.sayname=function(){ alert ...
- C标准库<ctype.h>实现
本文地址:http://www.cnblogs.com/archimedes/p/c-library-ctype.html,转载请注明源地址. 1.背景知识 ctype.h是C标准函数库中的头文件,定 ...
- Android性能优化（一）
Android性能优化典范 1.大多数用户感知到的卡顿等性能问题的最主要根源都是因为渲染性能. 从设计师的角度,他们希望App能够有更多的动画,图片等时尚元素来实现流畅的用户体验. 但是Android ...
- 利用eclipse抽取 代码片段为方法
选取要被抽取成方法的代码片段,右键->Refactor--->Extract Method 填写方法名称 抽取后成了这个样子:
- Sonar代码质量管理工具
最近上线了,Sonar代码扫描工具: 与jenkins集成: 实现自动扫描: 下面来简单聊聊Sonar能解决什么问题: ---------------------- Sonar简介 Sonar是一个用 ...