如何在同一地图上使用带有多个标记的Google Maps API
要在同一地图上使用带有多个标记的Google Maps API，您需要遵循以下步骤：
- 首先，您需要获取Google Maps API密钥。您可以通过访问Google Cloud控制台并创建一个新项目来获取API密钥。
- 在您的HTML文件中，添加以下代码以包含Google Maps API：
请将YOUR_API_KEY替换为您在第1步中获取的API密钥。
- 在您的JavaScript文件中，定义一个名为
initMap的函数。这个函数将初始化地图并添加多个标记。例如：
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: { lat: -33.9, lng: 151.2 },
});
const locations = [
{ position: { lat: -33.89, lng: 151.21 }, title: "Marker 1" },
{ position: { lat: -33.88, lng: 151.22 }, title: "Marker 2" },
{ position: { lat: -33.87, lng: 151.23 }, title: "Marker 3" },
];
locations.forEach((location) => {
const marker = new google.maps.Marker({
position: location.position,
map: map,
title: location.title,
});
});
}在这个例子中，我们定义了一个名为locations的数组，其中包含了多个标记的位置和标题。然后，我们使用forEach循环遍历这个数组，并为每个位置创建一个新的标记。
- 在您的HTML文件中，添加一个用于显示地图的元素，例如：
<div id="map" style="width: 100%; height: 400px;"></div>请确保地图元素的大小适合您的页面布局。
完成这些步骤后，您应该可以在同一地图上看到多个标记。您可以根据需要自定义标记的样式、颜色和行为。
相关·内容
1回答
未在地图上显示的mysql标记
javascript、php、mysql、google-maps、google-maps-api-3
晚安，我试着用JSON在地图上显示标记，但我不能--我不知道为什么--我可以看到地图，可以移动，但连一个标记都没有，
<?php
require("config.php");
/* lat/lng data will be added to this array */
$locations=array();
$query = $db->query('SELECT * FROM inmuebles');
while( $row = $query->fetch() ){
$longitude = $row['lo
浏览 1提问于2017-10-19得票数 0
回答已采纳
2回答
谷歌地图V3 InvalidValueError Rails 5
javascript、ruby-on-rails、ruby、google-maps、google-maps-api-3
我正在Rails 5 Ruby2.4.0中构建一个应用程序，我正在尝试实现一个动态谷歌地图，在地图上为PostgresDB中的每个位置设置一个标记。
我使用的地理编码器宝石，这是分配我的lat和lng浮动值。
当我使用以下代码时，：
<script>
function initMap() {
var uluru = [
<% @locations.each do |location| %>
{ lat:<%= location.latitude %>, lng:<%= location.longitude %
浏览 0提问于2017-04-28得票数 2
回答已采纳
1回答
组件之间共享状态
javascript、reactjs
我想做两个组件: App和Map。然而，当我尝试做一个新的品牌地图组件，并发送数据从应用程序到地图组件，我不能。
My (默认)组件将数据保存为状态。当我试图将此状态发送到Map组件时。它将数据作为支柱。
当然，如果我不把它们分开，用App.js编写所有的东西，一切都会像我所期望的那样工作(地图上显示的标记)。但是我想控制父组件中的所有状态。
我是否违反了基本的反应规则？我怎么才能解决呢？
App.js
import React, { Component } from "react";
import "./App.css";
import Map from &#
浏览 0提问于2018-08-06得票数 2
回答已采纳
1回答
从MySQL数据库在谷歌地图上添加多个标记
javascript、php、mysql、google-maps-api-3
我正在尝试使用来自MySQL数据库的数据(lat和lng)在谷歌地图上显示多个标记。当我运行foreach循环来返回地图上的这些标记时，它只返回最后一行。可能的问题是什么？
<?php
require_once "db/db_handle.php";
$select = "SELECT * FROM map";
$data = $db->query($select);
?>
<!DOCTYPE html>
<html>
<head>
<style>
#map {
浏览 9提问于2017-02-07得票数 0
1回答
"SyntaxError:缺失:在属性id之后“"uncaught : Object”当我试图在地图上添加更多标记时
html、google-maps
我想在地图上放更多的标记。问题是地图没有加载，并给出了错误：
"SyntaxError:缺失:在属性id之后“”未指明异常:对象“
<html>
<head>
<!-- styles put here, but you can include a CSS file and reference it instead! -->
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { h
浏览 2提问于2019-12-05得票数 0
2回答
当映射有“限制”选项集时，map.fitBounds工作起来很奇怪
javascript、google-maps、google-maps-api-3
我在地图上有两个标记。我想让这两个标记在地图上可见，当某些事件发生时。但是，当我在地图上添加restriction选项时，fitBounds不会显示标记。当我删除restriction选项时，它似乎正确地工作了。下面是示例代码：
var map, markers;
var locations = [{
lat: 50.8503396,
lng: 4.351710300000036
},
{
lat: 49.9570366,
lng: 36.3431478
},
];
function initMap() {
map = new googl
浏览 0提问于2019-02-15得票数 3
回答已采纳
1回答
谷歌地图Api标记不适用于多个位置
javascript、html、google-maps、google-maps-api-3
我有一个google地图api，我在地图上放置了多个位置，但不幸的是，我的位置标记没有出现在地图上，我不知道我的数组或者我声明的对象上是否有问题，我所需要的只是在这两个位置放置一些多个标记，下面是示例代码
var map;
function initMap() {
var manilaMain = {
info: "<strong>Chipotle on Broadway</strong><br>\
5224 N Broadway St<br> Chicago, I
浏览 1提问于2016-12-15得票数 0
回答已采纳
3回答
使用JS.erb内部的红宝石数组绘制地图上的位置
javascript、ruby-on-rails、ruby
我对编码很陌生。我试图使用JS绘制地图上的点，使用google的API。如果手动输入它们，我可以让它使用值，但我需要能够通过Ruby添加它们。
下面是工作的代码：
function initMap() {
var mapv2 = new google.maps.Map(document.getElementById('mapv2'), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
浏览 9提问于2017-08-21得票数 0
回答已采纳
1回答
显示InfoWindow的谷歌地图下拉选择器
javascript、google-maps、google-maps-api-3、google-maps-markers、markerclusterer
我已经创建了一个带有群集标记和显示每个位置的下拉菜单的Google地图。其想法是，当您从下拉列表中选择一个位置时，将显示InfoWindow。 所有的工作都很好--除了最后一点。 我无法让选择下拉菜单在选择某个位置时显示InfoWindow。 代码如下： <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[API-KEY]&callback=initMap&language=en"></script&g
浏览 6提问于2020-08-20得票数 0
回答已采纳
2回答
google地图api文本onclick文本
javascript、google-maps、google-maps-api-3
当我点击谷歌地图上的图标标记时，如何设置文本？
请求是:当我点击一个图标时，文本应该出现，而当我点击其他图标时，只有选定的图标应该有文本
下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering
浏览 14提问于2017-06-23得票数 0
1回答
Google map API :仅将MarkerClusterer应用于特定标记的类别
javascript、google-maps、google-maps-api-3、google-maps-markers、markerclusterer
使用MarkerClusterer，我只想对一类标记进行聚类。我这里有10个记号笔。我只想使用一个"type“变量，也就是" cluster”或"nocluster“对其中的8个进行聚类。
听起来很简单，但我没有找到任何建议来做到这一点...有什么想法吗？
谢谢
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
浏览 0提问于2017-11-02得票数 0
我使用mongoose将信息从mongoDB传递到我的ejs文件。在这里，我尝试通过一个名为addMarker的函数循环数据，该函数使用<%= %>标记提取数据并将其添加到谷歌地图。 我已经通过将这些值及其"typeof“打印到控制台进行了测试，它们表明它们是正确的(数字、数字、字符串)和正确的值。因此，我的假设要么是我传递值的方式无效，要么是<%= %>标记正在更改变量的类型。我还尝试使用<%-和<%标记 ejs <script>
function initMap(){
//Map Optio
浏览 27提问于2019-04-28得票数 0
回答已采纳
2回答
访问<script>标记中的MongoDB数据
node.js、ejs
我正在将MongoDB数据传递到我的EJS文件中。我可以使用超文本标记语言中的<% %>标记来访问数据。我遇到的问题是，我需要访问<script>标记中的数据，而<% %>标记不再起作用。 我尝试过的东西： 将数据添加到隐藏输入并使用document.getElementById().value进行访问 我尝试过在脚本标记中使用mongo数据的任何示例，但大多数答案都与HTML/EJS中的<% %>相关。 locationSchema const locationSchema = new Schema({
lat: String,
浏览 22提问于2019-04-26得票数 0
回答已采纳
1回答
javascript for循环不起作用
javascript
我在编程方面有一些经验，但我在Javascript方面完全是个新手。
我尝试创建一个html文件，其中显示一个谷歌地图，并在其上放置一些标记。
当我一次只做一个标记时，它工作得很好，如下所示：
function initMap() {
var map = ...;
var icon = ...;
var pt1 = {lat: ..., lng: ...};
var marker1 = new google.maps.Marker({
position: pt1,
map: map,
icon: icon,
浏览 0提问于2018-06-18得票数 3
1回答
标记聚类器以米为单位获得集群大小
javascript、html、google-maps、markerclusterer
我正在学习javascript中的google地图。我正在遵循教程代码，到目前为止，我有一个带有一些标记的地图，这些标记在缩放时会聚集在一起。这是密码-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering<
浏览 5提问于2020-05-26得票数 1
回答已采纳
2回答
如何在google地图上绘制多个标记？
javascript、jquery、html
我试图在谷歌地图上绘制多个标记，需要一些帮助。我从从ajax api调用返回的json数据中获取位置的经度和纬度。
我正在遵循下面的帖子来实现这个功能，但它不起作用，我不确定为什么。
我认为我的问题之一是我的位置变量没有被数组填充，所以当我执行.length时，它返回给我一个类似23的数字，即使结果集中只有3个位置。
var locations = [];
var map;
function initMap() {
map = new google.maps.Map(document.querySelector('.map'), {
center: { lat: -34.39
浏览 3提问于2019-03-31得票数 1
1回答
google地图在缩放和缩小地图上环绕覆盖固定的大小。
google-maps、overlay、zooming
我试图在地图上添加一个圆圈覆盖，但如果用户放大或放大地图，则必须使圆圈保持相同的大小，下面的代码显示了我在地图上显示圆圈的方式
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style
浏览 2提问于2015-12-05得票数 1
1回答
谷歌地图标记未显示
javascript、html、google-maps、knockout.js
我正在尝试使用Javascript、KnockoutJS和google在我的静态网页上实现标记。页面加载initMaps()函数，但当我试图加载标记时，它们不会出现。请帮助我，我是第一次使用MVVM，并让我知道我错了。
map.html在这里说：
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
font-family: Arial, sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#map {
浏览 1提问于2018-07-16得票数 0
回答已采纳
3回答
javascript中会有多个同名的对象吗？
javascript、html、google-maps、google-maps-api-3
我一直在阅读google中关于函数闭包的文章。它们使用以下示例：
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -25.363882, lng: 131.044922 }
});
var bounds = {
north: -25.363882,
south: -31.20340
浏览 3提问于2016-06-23得票数 0
2回答
Google地图覆盖不会定位在正确的标记上
javascript、google-maps、google-maps-api-3
我正在尝试制作一个标记列表来固定在地图上，每个标记都有自己的覆盖。它在很大程度上是有效的，但是所有的覆盖都被放置在彼此的顶部，而不是其相应的标记。
代码如下：
var myCenter = getMyLocation();
function initialize()
{
var mapProp = {
center: myCenter,
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("
浏览 0提问于2013-04-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
