您的位置：首页 > 编程语言 > Go语言

Google Map API 使用总结

2015-08-26 11:30 507 查看
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
};


mapTypeControlOption
s就是设定样式来，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;

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航