Google地图官方API-在地图上绘图(标记物)

简介:

标记物

介绍
标记可识别地图上的位置。默认情况下,标记使用标准图像。标记可以显示自定义图像,在这种情况下,它们通常称为“图标”。标记和图标是类型的对象 Marker。您可以在标记的构造函数中设置自定义图标,也可以调用setIcon()标记。请参阅下面有关自定义标记图像的更多信息。

从广义上讲,标记是一种叠加。有关其他类型的叠加层的信息,请参见 在地图上绘制。

标记被设计为交互式的。例如,默认情况下,它们接收 'click'事件,因此您可以添加事件侦听器以打开 显示自定义信息的 信息窗口。通过将标记的draggable属性设置为,可以允许用户在地图上移动标记true。有关可拖动标记的更多信息,请参见 下文。

添加标记
所述google.maps.Marker构造函数采用一个单一的 Marker options对象文本,指定标记的初始性能。

在构造标记时,以下字段特别重要并且通常设置:

position(必需)指定LatLng标识标记的初始位置。检索a的一种方法LatLng是使用地理编码服务。
map(可选)指定Map放置标记的位置。如果未在标记的构造上指定地图,则会创建标记,但不会将其附加到(或显示在)地图上。您可以稍后通过调用标记的setMap()方法来添加标记。
以下示例向澳大利亚中部乌鲁鲁的地图添加了一个简单的标记:

function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 4,
center: myLatLng

});

var marker = new google.maps.Marker({

position: myLatLng,
map: map,
title: 'Hello World!'

});
}

在上面的示例中,使用map标记选项中的属性,在标记构造时将标记放置在地图上。另外,您可以使用标记的setMap()方法将标记直接添加到地图,如以下示例所示:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker({

position: myLatlng,
title:"Hello World!"

});

// To add the marker to the map, call setMap();
marker.setMap(map);

标记的title将显示为工具提示。

如果您不希望Marker options在标记的构造函数中传递任何{}参数,请在构造函数的最后一个参数中传递一个空对象。

查看示例。

删除标记
要从地图上删除标记,请调用作为参数setMap()传递的方法null。

marker.setMap(null);

请注意,上述方法不会删除标记。它只是从地图上删除标记。相反,如果您希望删除标记,则应将其从地图上删除,然后将标记本身设置为null。

如果要管理一组标记,则应创建一个数组来保存标记。使用此数组,然后可以setMap()在需要删除标记时依次调用 数组中的每个标记。您可以删除标记,方法是将它们从地图中删除,然后将数组的设置length为0,从而删除所有对标记的引用。

查看示例。

动画标记
您可以为标记设置动画,以使它们在各种不同的情况下都可以动态显示。要指定标记动画的方式,请使用标记animation属性,类型为 google.maps.Animation。Animation 支持以下值:

DROP表示标记在首次放置在地图上时应从地图顶部下降到其最终位置。一旦标记停止,动画将停止,并animation恢复为null。通常在创建时指定这种动画类型 Marker。
BOUNCE表示标记应反弹到位。弹跳标记将继续弹跳,直到其animation属性显式设置为 为止null。
您可以通过调用启动以对现有标记的动画 setAnimation()在上Marker对象。

// The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.

var marker;

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {

zoom: 13,
center: {lat: 59.325, lng: 18.070}

});

marker = new google.maps.Marker({

map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 59.327, lng: 18.067}

});
marker.addListener('click', toggleBounce);
}

function toggleBounce() {
if (marker.getAnimation() !== null) {

marker.setAnimation(null);

} else {

marker.setAnimation(google.maps.Animation.BOUNCE);

}
}

查看示例。

如果您有很多标记,则可能不想一次将它们全部放置在地图上。您可以使用setTimeout()如下所示的模式来间隔标记的动画:

function drop() {
for (var i =0; i < markerArray.length; i++) {

setTimeout(function() {
  addMarkerMethod();
}, i * 200);

}
}

查看示例。

自定义标记图像
如果要在标记上显示字母或数字,则可以使用标记标签。如果需要更大的自定义,则可以定义一个图标来显示,而不是默认的标记图像。定义图标涉及设置许多确定标记的视觉行为的属性。

以下各节描述了标记标签,简单图标,复杂图标和符号(矢量图标)。

标记标签

标记标签是出现在标记内的字母或数字。本部分中的标记图像显示标记标签,上面带有字母“ B”。您可以将标记标签指定为字符串或 MarkerLabel 包含字符串和其他标签属性的对象。

创建标记时,可以label在MarkerOptions 对象中指定属性 。另外,您也可以拨打setLabel()上 标记 物设置在标签上已有标记。

以下示例在用户单击地图时显示带标签的标记:

// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
var bangalore = { lat: 12.97, lng: 77.59 };
var map = new google.maps.Map(document.getElementById('map'), {

zoom: 12,
center: bangalore

});

// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {

addMarker(event.latLng, map);

});

// Add a marker at the center of the map.
addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({

position: location,
label: labels[labelIndex++ % labels.length],
map: map

});
}

google.maps.event.addDomListener(window, 'load', initialize);

查看示例。

简单的图标
在最基本的情况下,图标可以简单地指示要使用的图像,而不是默认的Google Maps图钉图标。要指定这样的图标,请将标记的icon属性设置为图像的URL。Maps JavaScript API将自动调整图标的大小。

// This example adds a marker to indicate the position of Bondi Beach in Sydney,
// Australia.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {

zoom: 4,
center: {lat: -33, lng: 151}

});

var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({

position: {lat: -33.890, lng: 151.274},
map: map,
icon: image

});
}

查看示例。

复杂的图标
您可能需要指定复杂的形状以指示可单击的区域,并指定图标相对于其他叠加层的显示方式(它们的“堆叠顺序”)。以这种方式指定的图标应将其icon属性设置为类型的对象 Icon。

Icon 对象定义图像。它们还定义了size图标的图标,origin图标的图标(例如,如果您想要的图像是sprite中较大图像的一部分)以及anchor图标的热点应位于的位置(基于原点)。

如果您使用的是标签与自定义标记,您可以使用定位标签labelOrigin的属性 Icon 对象。

注意:标记阴影已在Maps JavaScript API的3.14版中删除。以编程方式指定的任何阴影都将被忽略。
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {

zoom: 10,
center: {lat: -33.9, lng: 151.2}

});

setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map) {
// Adds markers to the map.

// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.

// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
var image = {

url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)

};
// Shapes define the clickable region of the icon. The type defines an HTML
// element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
var shape = {

coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'

};
for (var i = 0; i < beaches.length; i++) {

var beach = beaches[i];
var marker = new google.maps.Marker({
  position: {lat: beach[1], lng: beach[2]},
  map: map,
  icon: image,
  shape: shape,
  title: beach[0],
  zIndex: beach[3]
});

}
}

查看示例。

将MarkerImage对象转换为类型Icon
在Maps JavaScript API版本3.10之前,复杂的图标被定义为MarkerImage对象。在Icon3.10版本中添加对象文本,并取代MarkerImage从3.11版本开始。Icon对象常量支持相同的参数MarkerImage,让您轻松转换 MarkerImage到Icon通过去除构造,在包装之前的参数{}的,并添加每个参数的名称。例如:

var image = new google.maps.MarkerImage(

place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(25, 25));

变成

var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};

符号
除栅格图像外,标记还支持显示称为的矢量路径Symbols。要显示矢量路径,Symbol请将带有所需路径的对象文字传递到标记的icon属性。您可以使用google.maps.SymbolPath中的预定义路径之一,也可以使用 SVG路径符号 定义自定义路径 。

有关更多信息,请参见 符号文档。

使标记可拖动
要允许用户将标记拖动到地图上的其他位置,draggable请true在标记选项中将设置 为。

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

// Place a draggable marker on the map
var marker = new google.maps.Marker({

position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"

});

进一步的标记定制
有关完全自定义的标记,请参见 自定义的弹出示例。

相关文章
|
4月前
|
人工智能 Serverless API
AI 创业及变现新思路:零门槛 AI 绘图,定制 ComfyUI Serverless API 应用
为了帮助用户高效率、低成本应对企业级复杂场景,本文介绍 ComfyUI API Serverless 版解决方案,通过使用该方案,用户可以充分利用 ComfyUI +Serverless 技术优势快速开发上线 AI 绘画应用,期待为广大开发者 AI 绘画创业及变现提供思路。
|
5月前
|
存储 数据库 Android开发
🔥Android Jetpack全解析!拥抱Google官方库,让你的开发之旅更加顺畅无阻!🚀
【7月更文挑战第28天】在Android开发中追求高效稳定的路径?Android Jetpack作为Google官方库集合,是你的理想选择。它包含多个独立又协同工作的库,覆盖UI到安全性等多个领域,旨在减少样板代码,提高开发效率与应用质量。Jetpack核心组件如LiveData、ViewModel、Room等简化了数据绑定、状态保存及数据库操作。引入Jetpack只需在`build.gradle`中添加依赖。例如,使用Room进行数据库操作变得异常简单,从定义实体到实现CRUD操作,一切尽在掌握之中。拥抱Jetpack,提升开发效率,构建高质量应用!
76 4
|
4月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
74 0
|
5月前
|
人工智能 自然语言处理 数据挖掘
详解:Google AI Gemini中文版本(基于API 开发实现对话)
谷歌旗下的人工智能应用Gemini,自问世以来凭借其强大的计算能力和高效的处理性能,迅速成为全球用户的宠儿。作为一款由世界顶尖科技公司开发的产品,Gemini不仅在语言处理、图像识别、数据分析等领域表现出色,还在多种复杂任务中展现了其卓越的智能决策能力。然而,由于网络限制等问题,国内用户往往无法直接访问和使用Gemini的网站,这也导致了许多技术爱好者和专业人士未能亲身体验这一先进技术所带来的便利和强大功能。
|
5月前
|
Java API PHP
【亲测有效,官方提供】php版本企查查api接口请求示例代码,php请求企查查api接口,thinkphp请求企查查api接口
【亲测有效,官方提供】php版本企查查api接口请求示例代码,php请求企查查api接口,thinkphp请求企查查api接口
156 1
|
5月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
270 0
|
6月前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
464 0
|
7月前
|
JSON Android开发 数据格式
Android框架-Google官方Gson解析,android开发实验报告总结
Android框架-Google官方Gson解析,android开发实验报告总结
|
24天前
|
JSON API 数据格式
淘宝 / 天猫官方商品 / 订单订单 API 接口丨商品上传接口对接步骤
要对接淘宝/天猫官方商品或订单API,需先注册淘宝开放平台账号,创建应用获取App Key和App Secret。之后,详细阅读API文档,了解接口功能及权限要求,编写认证、构建请求、发送请求和处理响应的代码。最后,在沙箱环境中测试与调试,确保API调用的正确性和稳定性。
|
1月前
|
供应链 数据挖掘 API
电商API接口介绍——sku接口概述
商品SKU(Stock Keeping Unit)接口是电商API接口中的一种,专门用于获取商品的SKU信息。SKU是库存量单位,用于区分同一商品的不同规格、颜色、尺寸等属性。通过商品SKU接口,开发者可以获取商品的SKU列表、SKU属性、库存数量等详细信息。