如何使用 Google Maps API V3 对地图添加多个标注？
我有个google_v3 map api
现在只能添加一个标注，而我希望能添加多个标注和文字标示，哪位高手帮忙解决下，万谢（最好能实现地区关联)、、、、、、、我的QQ： &br&我的网站：在路上&a href=&///?target=http%3A//& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a&
地图是在这个网站里的。 &br&&br&下面是google_v3.js的源文件 &br&var map = &br&var myOptions = { &br&
zoom: view_level, &br&
mapTypeControl: true, &br&
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, &br&
navigationControl: true, &br&
mapTypeId: google.maps.MapTypeId.ROADMAP, &br&
center: new google.maps.LatLng('30.2448','120.1519') &br&} &br&&br&function init_map() { &br&
map = new google.maps.Map(document.getElementById(map_id), myOptions); &br&
if(p1 != '' && p2 != '') { &br&
var c = new google.maps.LatLng(p2, p1); &br&
map.setCenter(c, view_level); &br&
var marker = new google.maps.Marker({ &br&
position: c,
map: map, &br&
title:title &br&
} &br&} &br&&br&function markmap() { &br&
var Center = map.getCenter(); &br&
var lat = new String(Center.lat()); &br&
var lng = new String(Center.lng()); &br&
setLatLng(lat, lng); &br&
var marker = new google.maps.Marker({ &br&
position: new google.maps.LatLng(lat,lng), &br&
map: map, &br&
draggable: true &br&
google.maps.event.addListener(marker, 'dragstart', function() { &br&
try { &br&
map.closeInfoWindow(); &br&
catch (err){ &br&
google.maps.event.addListener(marker, 'dragend', function() { &br&
var latlng = marker.getPosition(); &br&
lng = String(latlng.lng()); &br&
lat = String(latlng.lat()); &br&
setLatLng(lat,lng); &br&
}); &br&} &br&&br&function setLatLng(lat,lng) { &br&
document.getElementById('point1').value = &br&
document.getElementById('point2').value = &br&} &br&&br&window.onload = function () { &br&
init_map(); &br&}
我有个google_v3 map api
现在只能添加一个标注，而我希望能添加多个标注和文字标示，哪位高手帮忙解决下，万谢（最好能实现地区关联)、、、、、、、我的QQ： 我的网站：在路上
地图是在这个网站里的。 下面是google_v3.js的源文件 var map = var myOptions = {
zoom: view_level,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng('30.2448','120.1519') } function init_map() {
map = new google.maps.Map(document.getElementById(map_id), myOptions);
if(p1 != '' && p2 != '') {
var c = new google.maps.LatLng(p2, p1);
map.setCenter(c, view_level);> GoogleMap v3 API详解,该怎么解决
GoogleMap v3 API详解,该怎么解决
lih1267 & &
发布时间： & &
浏览：73 & &
回复：0 & &
悬赏：0.0希赛币
GoogleMap v3 API详解经过一下午的研究，对googleMap V3的api有了写了解。与大家分享。欢迎高手指教！！直接将下面代码贴出来，另存为***.html，运行即可。　　HTML code　　 &html& &head& &meta name=&viewport& content=&initial-scale=1.0, user-scalable=no& /&
&script type=&text/javascript& src=&;$>$/script&
&script type=&text/javascript& src=&;$>$/script&
&script src=&; type=&text/javascript&$>$/script&
&SCRIPT language=JScript event=OnObjectReady(objObject,objAsyncContext) for=foo&
if(objObject.IPEnabled != null && objObject.IPEnabled != &undefined& && objObject.IPEnabled == true)
if(objObject.MACAddress != null && objObject.MACAddress != &undefined&)
MACAddr = objObject.MACA
if(objObject.IPEnabled && objObject.IPAddress(0) != null && objObject.IPAddress(0) != &undefined&)
IPAddr = objObject.IPAddress(0);
if(objObject.DNSHostName != null && objObject.DNSHostName != &undefined&)
sDNSName = objObject.DNSHostN
&script type=&text/javascript&& //定义一个Geocoder对象
//定义一个Map对象
var infowindow = new Window();
//初始化一个信息窗口，用来显示提示信息
//定义导航组件
var boxpolys =
//保存路线的数组
//var directions =
var routeBoxer =
//RouteBoxer对象
var distance = // km
//初始化一个最简单的地图
function initialize() {
//创建Geocoder对象，该对象是实现地址和经纬度的转换
geocoder = new google.maps.Geocoder();
//实例化LatLng，LatLng是标注经纬度的对象，用它来控制地图中心显示的坐标
//纬度介于-90 度和+90度，经度将被介于-180度和180度
//ipLocation.latitude, ipLocation.longitude 外部插件根据ip获取经纬度
var latlng = new google.maps.LatLng(ipLocation.latitude, ipLocation.longitude);
//定义MapOptions对象属性
var myOptions = {
//地图缩放级别
center: latlng,
//中心点坐标
mapTypeId: google.maps.MapTypeId.ROADMAP,
//地图显示的类型。有地图(ROADMAP)、卫星(SATELLITE)、混合(HYBRID)、地形(TERRAIN)四种类型
disableDoubleClickZoom:true
//还有其它属性见api中
//创建地图。构造器中有两个参数。第一个参数是显示层div的对象。第二个参数是myOptions
map = new google.maps.Map(document.getElementById(&map_canvas&), myOptions);
codeEvent();
//调用下面定义的事件处理
//导航组件初始化
routeBoxer = new RouteBoxer();
directionService = new google.maps.DirectionsService();
directionsRenderer = new google.maps.DirectionsRenderer({ map: map });
//根据地址查找。并且查找的结果显示在中心并且标记
function codeAddress() {
var address = document.getElementById(&address&).
if (geocoder) {
/*Geocoder只有一个方法geocode
第一个参数: GeocoderRequest，有五个可配置参数address、bounds、language、location、region
第二个参数：回调方法（GeocoderResult对象[数组]，GeocoderStatus对象）
GeocoderResult：以json格式表示的geocode结果集，有三个属性{
address_components：GeocoderAddressComponent对象的数组
geometry：GeocoderGeometry 对象 {
bounds：LatLngBounds 对象
location：LatLng 对象
location_type：GeocoderLocationType 对象
viewport：
LatLngBounds 对象
types：一个字符串的数组，为一个地理位置的唯一标示
GeocoderStatus 定义了geocode()返回的7个状态
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//results[0].geometry.location
根据上面的注释可以知道 这里是通过搜索地址来获得经纬度
map.setCenter(results[0].geometry.location);
Marker类：给地图显示标记。参数为 MarkerOptions。共有12个属性。其中position属性为必须配置的。
var marker = new google.maps.Marker({
//定义在map中显示标记。
position: results[0].geometry.location
//定义标记的位置
infowindow.setContent(address);
//设置信息的内容
infowindow.open(map, marker);
//打开信息窗口。一般与map和标记关联
alert(&Geocode was not successful for the following reason: & + status);
//根据经纬度查找中心点。并且显示中心点的信息
function codeLatLng() {
//var input = document.getElementById(&latlng&).
/*对经纬度进行处理*/
var input = &28.19,112.98&;
var latlngStr = input.split(&,&,2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
//根据经纬度创建LatLng
if (geocoder) {
geocoder.geocode({'latLng': latlng}, function(results, status) {
//根据经纬度查找地理位置
if (status == google.maps.GeocoderStatus.OK) {
//判断查找状态
if (results[1]) {
//查找成功
map.setZoom(11);
//设置zoom
marker = new google.maps.Marker({
//添加标记
position: latlng,
InfoWindow 信息窗口类。显示标记位置的信息
infowindow.setContent(results[1].formatted_address);
//设置信息的内容
infowindow.open(map, marker);
//打开信息窗口。一般与map和标记关联
alert(&Geocoder failed due to: & + status);
//事件处理 function codeEvent() {
google.maps.event.addListener(map,'dblclick',function(event){
map.setCenter(event.latLng);
var marker = new google.maps.Marker({//双击的时候给个标记，并显示个信息
position: event.latLng,
//注意此处，获取标记的经纬度的方法
draggable:true,
title:'my tag'
infowindow.setContent('my home');
infowindow.open(map, marker);
//鼠标移动
google.maps.event.addListener(map,'mouseover',function(){
//alert(&run mouseover&);
//导航处理 function route() {
// Clear any previous route boxes from the map
clearBoxes();
// Convert the distance to box around the route from miles to km
distance = parseFloat(400) * 1.609344;
DirectionsRequest 对象 一共有10个可配置参数
导航DirectionService.route方法必须的参数对象 有三个必须配置的属性：开始地点、目的地，导航类型
var request = {
origin: document.getElementById(&from&).value,
//开始地点 可以为地点名或者LatLng对象
destination: document.getElementById(&to&).value,
可以为地点名或者LatLng对象
provideRouteAlternatives: true,
//是否提供替代路线
travelMode: google.maps.DirectionsTravelMode.DRIVING
//导航类型 BICYCLING(自行车方式)、DRIVING(驾车)、WALKING(自定义)
/*导航方法。参数为DirectionsRequest 和一个回调函数
其中回调函数的参数为
1、DirectionsResult 只有一个属性 DirectionsRoute[]对象数组。
当DirectionsRequest 中的provideRouteAlternatives 设置为true 时有多个数据集，否则数组的长度为1
2、DirectionsStatus
directionService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
alert(&共有 & + result.routes.length + & 种导航方案&);
/*DirectionsRoute 对象
导航路线的对象
var path = result.routes[0].overview_
DirectionsRoute 对象
var boxes = routeBoxer.box(path, distance); //通过 routeBoxer对象画出路线图
drawBoxes(boxes);
alert(&Directions query failed: & + status);
// 描路线的方法
function drawBoxes(boxes) {
boxpolys = new Array(boxes.length);
for (var i = 0; i & boxes. i++) {
alert(boxes[i]);
//画矩形点描出路径
boxpolys[i] = new google.maps.Rectangle({
//构造器的参数 RectangleOptions类型
RectangleOptions:共9个可配置参数 详细见API
bounds: boxes[i],
//LatLngBounds 对象，描点的位置
fillOpacity: 0,
//背景的不透明度 0为透明
strokeOpacity: 0.5,
//导航线的透明度 0为透明
strokeColor: '#000000',
//背景颜色
strokeWeight: 1,
// 清除路线缓存
function clearBoxes() {
if (boxpolys != null) {
for (var i = 0; i & boxpolys. i++) {
boxpolys[i].setMap(null);
boxpolys =
&/script& &/head& &body onload=&initialize()&&
&div id=&map_canvas& style=&width: 500; height: 500;&$>$/div&
&input id=&address& type=&textbox& value=&伍家岭&&
&input type=&button& value=&查询& onclick=&codeAddress()&&
&input type=&button& value=&显示中心点& onclick=&codeLatLng()&&
从&input id=&from& type=&text& value=&星沙&&
到&input id=&to& type=&text& value=&华悦大厦&&
&input type=&button& value=&导航& onclick=&route()&&
&iframe src=&& width=&168& height=&60& frameborder=&no& border=&0& marginwidth=&0& marginheight=&0& scrolling=&no&$>$/iframe& &br$>$br$>$br$>$br&
&script src=&;$>$/script& &/body& &/html&
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&Google Maps API V3 更新程序 离线地图开发包制作工具 | 查问题
汇聚最新编程技术，编程问题一网打尽
& Google Maps API V3 更新程序 离线地图开发包制作工具
Google Maps API V3 更新程序 离线地图开发包制作工具
[作者： 分类： ]
1.可下载谷歌地图JavaScript API V3 最新API2.去掉谷歌地图联网验证功能。3.支持简体中文、繁体中文、英文版API下载4.自带离线地图例子，简单易用。
利用Google Maps JavaScript API离线版,可以在没有网络的情况下调用本地的瓦片地图。目录结构：mapfiles———-google maps 核心 apimaptile———–地图瓦片,地图瓦片可用/p/maptiledownloader/ 下载获得offlinemaps.html–离线地图演示demo
离线api使用例子
1 &!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"& 2 &html xmlns="http://www.w3.org/1999/xhtml"& 3
&meta http-equiv="content-type" content="text/ charset=utf-8" /& 6
&title&Offline Maps Demo&/title& 7
&div id="map_canvas" style="left:0;top:0;width:100%;height:100%;position:"&&/div&11
&!--注释的这段是引用在线的Google地图API--&12
&!--script type="text/javascript" src="/maps/api/js?sensor=false&language=zh-cn"&&/script--&13
&!--使用本地的Google地图API--&14
&script type="text/javascript" src="mapfiles/mapapi.js"&&/script&15
&script type="text/javascript"&16
function GMapsMapTypeFactory() {}17 18
GMapsMapTypeFactory.createMapType = function (name,mapTilePath) {19
///var mapTilePath = "maptile/nokiamaps/roadmap/";20
var getTileUrl = function (coord, zoom) {21
var numTiles = (1 && zoom);22
if ((coord.x & 0) || (coord.x &= numTiles) || (coord.y & 0) || (coord.y &= numTiles)) {23
return null;24
return mapTilePath + zoom + "/" + coord.x + "/" + coord.y + ".png";26
var imageMapTypeOptions = {29
"name":name,30
"alt": "Show street map",31
"tileSize": new google.maps.Size(256, 256),32
"maxZoom": 22,33
"minZoom": 0,34
"getTileUrl": getTileUrl,35
"isPng": true,36
"opacity": 1.037
return new google.maps.ImageMapType(imageMapTypeOptions);40
function initialize() {43
var latlng = new google.maps.LatLng(30.352,114.55)44
var map = new google.maps.Map(document.getElementById("map_canvas"));45
var gmapsMapTypeId = "nokia_roadmap";46
map.mapTypes.set(gmapsMapTypeId, GMapsMapTypeFactory.createMapType("nokia","maptile/nokiamaps/roadmap/"));47
var mapAbcMapTypeId = "mapabc_roadmap";49
map.mapTypes.set(mapAbcMapTypeId, GMapsMapTypeFactory.createMapType("mapabc","maptile/mapabc/"));50
map.streetViewControl = false;52
map.mapTypeControlOptions = {53
mapTypeIds: [gmapsMapTypeId,mapAbcMapTypeId,google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE]54
map.setMapTypeId(gmapsMapTypeId);56 57
map.setCenter(latlng);58
map.setZoom(5);59 60
var marker = new google.maps.Marker({61
position: latlng,62
map: map,63
draggable: true,64
title: "Hello World!"65
var infowindow = new Window({68
content: "latlng:" + marker.getPosition().toString(),69
size: new google.maps.Size(50, 50)70
google.maps.event.addListener(marker, 'click', function () {73
infowindow.setContent("latlng:" + marker.getPosition().toUrlValue(6));74
infowindow.open(map, marker);75
google.maps.event.addDomListener(window, "load", initialize);80
&/script&81
&/body&82 83 &/html&
下载源码和例子29262人阅读
JavaScript（14）
API学习地址
其实google map的api很简单的，这里是学习文档的传送门
代码的一些实例
可以国际化的google map
&script type=&text/javascript&
src=&/maps/api/js?sensor=false&language=语言-国家缩写&&
&/script&在language后面写上语言国家缩写就可以国际化google map了
初始化地图的方法：
var myOptions = {
zoom : 11,
center : new google.maps.LatLng(30..3456789),
mapTypeId : google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById(&mainMapLayer&),myOptions);
1、center是指地图定位的坐标，需要LatLng对象，对象参数就是纬度和经度
2、mapTypeId是类似枚举的东西，详细参考api
3、mainMapLayer是我的地图div对象的id名，这个div要指明高度和宽度要不地图没法初始化
Marker类、InfoWindow类
添加自定义的marker：
var userMarker = new google.maps.Marker( {
position : new google.maps.LatLng(30,120),
map : map,
title : &鼠标悬浮时提示的信息&,
icon : &图片位置字符串&
var yourInfoW
(function(userMarker) {
google.maps.event.addListener(userMarker, 'click', function() {
if (!yourInfoWindow) {
yourInfoWindow = new Window( {});
yourInfoWindow.setContent(userMarker.title);
yourInfoWindow.open(map, userMarker);
})(userMarker);
1、Marker类是为地图上添加类似小图钉似的提示位置用的东西
2、Marker需要设置坐标和地图对象来初始化
3、同一个Marker对象要重用时使用下面语句重新使用
userMarker.setMap(null);4、最后是为marker对象添加点击事件，使用的是嵌套写法（用在for循环里更好使）
5、infowindow是弹出的那个大窗体，他的setContent方法是支持html和css代码的，可以放进去div或table设置样式
LatLngBounds类
Map范围自适应：
var bounds = new google.maps.LatLngBounds();
bounds.extend(new google.maps.LatLng(30,120));
//为新的结果创建marker
for ( var i in member) {
bounds.extend(new google.maps.LatLng(member[i][2],member[i][3]));
var marker = new google.maps.Marker( {
position : new google.maps.LatLng(member[i][2], member[i][3]),
map : map,
title : &title&,
icon : &imageAddress&
markers.push(marker);
//为marker添加infowindow，添加点击事件
(function(i, marker) {
google.maps.event.addListener(
function() {
if (!infoawindow) {//单例infowindow
infoawindow = new Window(
infoawindow.open(map, marker);
})(i, marker);
map.fitBounds(bounds);//这句最重要
Geocoder类
提交地址字符串返回经纬度（很好用的功能），查询全靠它
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {
'address' : &格式可以是不分割的：北京市东城区东直门，或北京市,东城区,东直门&
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myLatLng = results[0].geometry.
//results数组里有很多有用的信息，包括坐标和返回的标准位置信息
alert(interGeoAnalysisFailed);
&地图导航服务
//地图对象
var mode = google.maps.DirectionsTravelMode.DRIVING; //谷歌地图路线指引的模式
var directionsDisplay = new google.maps.DirectionsRenderer(); //地图路线显示对象
var directionsService = new google.maps.DirectionsService(); //地图路线服务对象
var directionsVisible = //是否显示路线
directionsDisplay.setMap(null);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(&directionsPanel&)); //将路线导航结果显示到div中
var request = {origin: findLatLng, destination: marker.position, travelMode: mode, optimizeWaypoints: true, avoidHighways: false,avoidTolls: false};
directionsService.route
function(response, status)
if (status == google.maps.DirectionsStatus.OK)
directionsDisplay.setDirections(response);
directionsVisible =
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：385858次
积分：3849
积分：3849
排名：第4618名
原创：71篇
转载：42篇
译文：10篇
评论：39条
(1)(1)(1)(1)(4)(2)(3)(2)(24)(1)(2)(23)(17)(13)(13)(11)(4)google&map&API&V3基本功能总结
这周任务完成一个地图和视频资源结合的demo，今天周日又加上“万恶”的光棍节，回顾总结一下所用的google
map知识，写在这里就当作备忘吧。
& & 本文主要总结Google map API
V3使用中最简单也是最常见的一些操作以及相关概念，如果需要更加详细的信息，请直接阅读Google提供的关于map的文档。
google map api v3文档链接：
英文版：/maps/documentation/javascript/reference
中文版：/maps/documentation/javascript/overlays?hl=zh-CN
1、在页面中加入Google Map服务
src="/maps/api/js?sensor=false"&
其中sensor参数用于指明此应用程序是否使用传感器确定用户的位置，取值为true或false。
2、加载Google Map API
&function initialize() {
& var myLatlng = new google.maps.LatLng(39.9629,
116.3581);
& var myOptions = {
& & & zoom:
& & & center:
& & & mapTypeId:
google.maps.MapTypeId.ROADMAP
& map = new
google.maps.Map(document.getElementByIdx_x("map_canvas"),
myOptions);
google.maps.event.addDomListener(window, "load",
initialize);
最后一句话是打开浏览器加载地图。
3、向地图中添加marker
&function initialize() {
& var myLatlng = new google.maps.LatLng(39.9629,
116.3581);
& var myOptions = {
& & & zoom:
& & & center:
& & & mapTypeId:
google.maps.MapTypeId.ROADMAP
& map = new
google.maps.Map(document.getElementByIdx_x("map_canvas"),
myOptions);
& var image='Image/webcam.png';
& var marker1 = new google.maps.Marker({
& &position:
lamyLatlngtlng[j],
& & & map:
icon:image,
title:"hello,world!"
每个标记都是一个google.maps.Marker对象，在实例化时需要给定一定的配置信息，如标记的位置。
通过icon可以设定自己想显示的图标，不设置则显示Google
map默认的图标。title表示鼠标放到marker
上要显示的值。
4、向地图中添加信息窗口infowindow
function initialize() {
& var myLatlng = new google.maps.LatLng(39.9629,
116.3581);
& var myOptions = {
& & & zoom:
& & & center:
& & & mapTypeId:
google.maps.MapTypeId.ROADMAP
& map = new
google.maps.Map(document.getElementByIdx_x("map_canvas"),
myOptions);
& var image='Image/webcam.png';
& var marker1 = new google.maps.Marker({
& &position:
lamyLatlngtlng[j],
& & & map:
icon:image,
title:"hello,world!"
& var contentString = 'Hello World';
& var infowindow = new
& content: contentString
& google.maps.event.addListener(marker, 'click',
function() {
infowindow.open(map,marker);
每个信息窗口都是一个Window对象，在实例化时需要给定一定的配置信息，如窗口中的内容，标记的位置。
其中需要说明的是，配置信息中的content即可以是html字符串，也可以是一个dom节点。要让一个信息窗口显示出来，我们可以调用它的open方法，并制定显示在那个Map实例对象中。注意，如果在信息窗口构造时的配置中已经制定了位置（通过position字段），那么直接使用infoWindow.open(
)，就可以显示在地图的制定位置上。当然，我们也可以将信息窗口的显示绑定在已经在地图中的标记对象中，只需在open的第二个参数中制定标记对象即可infoWindow.open(
map, marker )。
5、事件绑定
使用google.maps.event.addListener()方法来进行事件的监听。该方法接受三个参数：一个对象，一个待侦听事件以及一个在指定事件发生时调用的函数。
(1)监听地图的缩放：
google.maps.event.addListener(map, 'zoom_changed', function()
(2)标记的点击：
google.maps.event.addListener( marker, 'click', function(
&// 点击事件后要实现的函数；
(3)监听dom事件:
google.maps.event.addDomListener(window, 'load',
initialize);
以上的基本功能都是我用到过的，当然Google map API
V3的功能远远不止这些，如果还有更高的要求，请直接访问google的官方文档。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。