Google Map API

最新推荐文章于 2019-12-25 23:30:57 发布

转载最新推荐文章于 2019-12-25 23:30:57 发布 · 541 阅读

本文介绍了使用Google Map API V3实现地图的基本步骤，包括地图显示、地图类型、标记添加与删除、标记内容自定义、地图控件自定义以及路线定义与点击事件。通过实例代码，详细解释了各部分的功能与实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Google Map API Version3 教程(一)：显示一个最基本的地图

1 实现一个地图：

<head>中引用：

Html里面合适的位置定义：

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可选，详见： http://blog.sina.com.cn/s/blog_4cdc44df0100u7zl.html

此时就可以显示中心点是（113，27）的地图了

Google Map API Version3 教程(二)：地图的类型

google提供了4种地图类型，下面看一下四种类型的效果：

在定义google map的地图时候：

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_x_x("map"), myOptions);

mapTypeId这个参数有4个常量，分别对应4中地图类型：

MapTypeId.ROADMAP

效果如下：

Google <wbr>Map <wbr>API <wbr>Version3 <wbr>教程(二)：地图的类型

MapTypeId.SATELLITE

效果如下：

MapTypeId.HYBRID

效果如下：

MapTypeId.TERRAIN

效果如下：

Google Map API Version3 教程(三)：代码添加和删除marker标记

Google Map API Version3 教程:在地图通过代添加和删除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 Version3 教程(四)：给marker标记加上自定义内容

Google Map API Version3 中标记可以给marker加上任何自己的东西。

效果如下：

Google <wbr>Map <wbr>API <wbr>Version3 <wbr>教程(四)：给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样式表

示例代码下载：http://download.youkuaiyun.com/source/3331139

Google Map API Version3 教程(五)：地图控件的自定义

Google Map提供了三种控件，也提供了多种定义控件的方法：

navigationControl：

Google <wbr>Map <wbr>API <wbr>Version3 <wbr>教程(五)：地图控件的自定义

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 定位方法放置的任何元素之下，控件的任何子元素“流”向底部。

示例代码下载： http://download.youkuaiyun.com/source/3331139

Google Map API Version3 教程(六)：定义路线和点击事件

你可以在Google Map添加你想添加的线，并且为线添加点击事件。

效果如下：

Google <wbr>Map <wbr>API <wbr>Version3 <wbr>教程(六)：定义路线和点击事件

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); //点击线的时候显示线的弹出框

}

示例代码下载： http://download.youkuaiyun.com/source/3331139