marker 相关问题

Google地图标记(用于制作Google地图)

Leaflet v1.03:使 CircleMarker 可拖动?

Leaflet 大师是否有一个想法,在 Leaflet v1.0.3 中使 CircleMarker 可拖动的最简单方法是什么? 通过使用“可拖动”选项,可以轻松地对“标准”标记执行此操作。但这样的

回答 3 投票 0

Google 地图 Javascript API:marker.setPosition 问题测试模拟</tit...</desc> <question vote="4"> <p>这可能是显而易见的事情......但我看不到它。 以下代码对除marker.setPosition 操作之外的所有内容均按预期工作:</p> <pre><code><head> <title>Test Simulation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=x&sensor=false"> </script> <script type="text/javascript"> var marker = null; var myLatlng = null; var map = null; var image = null; var mapOptions = null function movemarker() { xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","http://x.com/x13/?testloc=1",false); xmlhttp.send(); var data = xmlhttp.responseText; vals = data.split(','); latv = parseFloat(vals[0]); lonv = parseFloat(vals[1]); myLatlng = new google.maps.LatLng(latv,lonv); var fld = document.getElementById('before_map'); fld.innerText = ' ' + 'lat:' + latv + ', lon: ' + lonv + ' ' + myLatlng.toString(); marker.setPosition = myLatlng; } function initialize() { myLatlng = new google.maps.LatLng(44.809122,-36.650391); mapOptions = { center: myLatlng, zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); image = 'http://x.com/x_icon.gif'; marker = new google.maps.Marker( { position: myLatlng, map: map, icon: image, title:"Hello World!" }) window.setInterval("movemarker()",5000); } </script> </head> <body onload="initialize(); "> <div id="before_map">Test area...</div> <div id="map_canvas" style="align:right; width:600; height:500"></div> </code></pre> <p>“before_map”测试区域显示新的纬度和经度值——每 5 秒更新一次。</p> <p>我已经根据类似问题的答案进行了调整,但我仍然陷入困境。</p> </question> <answer tick="true" vote="26"> <p>setPosition 是一个方法。您需要将代码修改为 </p> <pre><code>marker.setPosition(myLatlng); </code></pre> <p>请检查是否有效。</p> </answer> <answer tick="false" vote="10"> <p>marker.setPosition 是一个函数,而不是一个属性,我想你想要</p> <p><pre><code>marker.setPosition(myLatlng);</code></pre></p> </answer> <answer tick="false" vote="0"> <p><strong>自 2024 年 2 月 21 日 (v3.56) 起,google.maps.Marker 已弃用</strong>。</p> <p>3.56版本引入了<a href="https://developers.google.com/maps/documentation/javascript/advanced-markers/start" rel="nofollow noreferrer">AdvancedMarkerElement</a>,它没有<pre><code>marker.setPosition(myLatlng)</code></pre>方法。以下是如何使用新的高级标记以及如何将其更新到新位置。</p> <pre><code>const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: "MyMapId", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map: map, position: { lat: 37.4239163, lng: -122.0947209 }, gmpDraggable: true, title: "My draggable marker" }); </code></pre> <p>更新标记位置:</p> <pre><code>marker.position = { lat: 37.4239278, lng: -122.0943694 } </code></pre> <p>请注意,新的高级标记需要 <pre><code>map</code></pre> 对象具有 <pre><code>mapId</code></pre> 属性,否则将无法工作。</p> </answer> </body></html>

这可能是显而易见的事情......但我看不到它。 以下代码对除marker.setPosition 操作之外的所有内容均按预期工作: 测试模拟</tit...</desc> <question vote="4"> <p>这可能是显而易见的事情......但我看不到它。 以下代码对除marker.setPosition 操作之外的所有内容均按预期工作:</p> <pre><code><head> <title>Test Simulation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=x&sensor=false"> </script> <script type="text/javascript"> var marker = null; var myLatlng = null; var map = null; var image = null; var mapOptions = null function movemarker() { xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","http://x.com/x13/?testloc=1",false); xmlhttp.send(); var data = xmlhttp.responseText; vals = data.split(','); latv = parseFloat(vals[0]); lonv = parseFloat(vals[1]); myLatlng = new google.maps.LatLng(latv,lonv); var fld = document.getElementById('before_map'); fld.innerText = ' ' + 'lat:' + latv + ', lon: ' + lonv + ' ' + myLatlng.toString(); marker.setPosition = myLatlng; } function initialize() { myLatlng = new google.maps.LatLng(44.809122,-36.650391); mapOptions = { center: myLatlng, zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); image = 'http://x.com/x_icon.gif'; marker = new google.maps.Marker( { position: myLatlng, map: map, icon: image, title:"Hello World!" }) window.setInterval("movemarker()",5000); } </script> </head> <body onload="initialize(); "> <div id="before_map">Test area...</div> <div id="map_canvas" style="align:right; width:600; height:500"></div> </code></pre> <p>“before_map”测试区域显示新的纬度和经度值——每 5 秒更新一次。</p> <p>我已经根据类似问题的答案进行了调整,但我仍然陷入困境。</p> </question> <answer tick="true" vote="26"> <p>setPosition 是一个方法。您需要将代码修改为 </p> <pre><code>marker.setPosition(myLatlng); </code></pre> <p>请检查是否有效。</p> </answer> <answer tick="false" vote="10"> <p>marker.setPosition 是一个函数,而不是一个属性,我想你想要</p> <p><pre><code>marker.setPosition(myLatlng);</code></pre></p> </answer> <answer tick="false" vote="0"> <p><strong>自 2024 年 2 月 21 日 (v3.56) 起,google.maps.Marker 已弃用</strong>。</p> <p>3.56版本引入了<a href="https://developers.google.com/maps/documentation/javascript/advanced-markers/start" rel="nofollow noreferrer">AdvancedMarkerElement</a>,它没有<pre><code>marker.setPosition(myLatlng)</code></pre>方法。以下是如何使用新的高级标记以及如何将其更新到新位置。</p> <pre><code>const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: "MyMapId", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map: map, position: { lat: 37.4239163, lng: -122.0947209 }, gmpDraggable: true, title: "My draggable marker" }); </code></pre> <p>更新标记位置:</p> <pre><code>marker.position = { lat: 37.4239278, lng: -122.0943694 } </code></pre> <p>请注意,新的高级标记需要 <pre><code>map</code></pre> 对象具有 <pre><code>mapId</code></pre> 属性,否则将无法工作。</p> </answer> </body></html>

回答 0 投票 0

Android 标记如何实现拖放?

嗨? 我正在 Android 中开发 MapView 应用程序。我有三个标记,我希望稍后能够使用 Google Map API getlocation-function。为了尝试一下,我想移动

回答 7 投票 0

MapBox 标记在缩放时移动

我正在开发 MapBoxgl,我想添加几个标记。 这是我的index.html: 我正在开发 MapBoxgl,我想添加几个标记。 这是我的index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link href=" /assets/css/bootstrap.min.css " rel="stylesheet" /> <link href=" /assets/css/mapbox-gl.css " rel="stylesheet" /> <link href=" /assets/css/main.css " rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="/assets/js/mapbox-gl.js"></script> <script src="/assets/js/map-style.js"></script> </body> </html> 这是map-style.js: var map = new mapboxgl.Map({ container: 'map', center: [57.3221, 33.5928], zoom: 5, style: style }); var geojson = { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: [30.61, 46.28] }, properties: { title: 'point 1', description: 'point 1 Description', message: 'point1', iconSize: [25, 25] } }, { type: 'Feature', geometry: { type: 'Point', coordinates: [30.62, 46.2845] }, properties: { title: 'point 2', description: 'point 2 Description', message: 'point 2', iconSize: [25, 25] } }] }; map.on('load', function () { // add markers to map geojson.features.forEach(function(marker) { // create a DOM element for the marker var el = document.createElement('div'); el.className = 'markers'; el.style.backgroundImage = 'url(assets/marker-azure.png)'; //el.style.width = marker.properties.iconSize[0] + 'px'; el.style.height = marker.properties.iconSize[1] + 'px'; el.addEventListener('click', function() { window.alert(marker.properties.message); }); // add marker to map new mapboxgl.Marker(el) .setLngLat(marker.geometry.coordinates) .addTo(map); }); }); 以下是与地图和标记相关的 main.css 部分: #map { position:absolute; top:0; bottom:0; width:100% } .markers { display: absolute; border: none; border-radius: 50%; cursor: pointer; padding: 0; } 所以,我的问题是,当我向标记添加宽度属性时,它们的图标可以正确显示(有点拉伸),但它们的坐标错误并在缩放时移动,如下图所示: 另一方面,如果宽度属性被消除,它们就在正确的位置,并且在缩放时不会移动,但它们非常拉伸,实际上与屏幕一样宽(下图): 值得注意的是我使用了bootstrap。难道是这个原因吗?如果不是,那是什么问题? 谢谢 import 'mapbox-gl/dist/mapbox-gl.css'; 添加 import css 对我有用。 我找到了解决方案并在这里与遇到此问题的其他人分享。该问题是由于使用了不是最新版本的库而引起的。升级到最新版本后,我可以解决这个问题。 请注意,当您使用 npm 时,有时会出现此类问题。确保库已完全下载并且是最新版本。 MapBox 的最新版本可以在这里找到。 有类似的问题,标记似乎在放大/缩小时改变了位置,通过设置偏移来修复它,想分享它是否可以帮助其他人,这里是fiddle // add marker to map var m = new mapboxgl.Marker(el, {offset: [0, -50/2]}); m.setLngLat(coordinates); m.addTo(map); (使用mapbox 1.13.0) 我遇到了类似的问题,弹出窗口没有显示,并且会根据缩放更改位置。 Mapbox 官方声明您需要包含 css 文件才能使标记和弹出窗口按预期工作。 https://docs.mapbox.com/mapbox-gl-js/guides/install/ 但是,您也可以将该 css 直接复制到组件中并将其用作元素。例如: export default function MarkerMapTest(props) { const mapContainer = React.useRef(null) const map = React.useRef(null) const elemRef = React.useRef(null) React.useEffect(() => { map.current = new mapboxgl.Map({ container: mapContainer.current, style: "mapbox://styles/mapbox/dark-v10", center: [151.242, -33.9132], zoom: 14, }) const marker = new mapboxgl.Marker({ element: elemRef.current, }) .setLngLat([151.242, -33.9132]) .addTo(map.current) }, []) return ( <div style={{ width: 600, height: 600, backgroundColor: "gray" }} ref={mapContainer} > <div style={{ width: 30, height: 30, borderRadius: 15, backgroundColor: "red", position: "absolute", // ! top: 0, // ! left: 0, // ! }} ref={elemRef} /> </div> 就我而言,我使用的 svg 在实际内容周围有一些空间。这样我就感觉标记在移动。一个简单的修复方法是删除内容周围的空间(例如,使用 inkscape 的“根据绘图或选择调整页面大小”选项:https://graphicdesign.stackexchange.com/a/21638) 在 svg 标记上设置 display: block 也很重要。请参阅:https://stackoverflow.com/a/39716426/11603006 这是因为样式未导入到您的代码中。只需在 index.html 的 head 标签中添加这一行 <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' /> 如果有人遇到这个错误,请尝试在顶部添加 CDN,这就是我修复我的问题的方法,它的工作原理就像一个魅力

回答 7 投票 0

旋转传单中的标记

如何旋转传单中的标记?我将有很多标记,所有标记都有旋转角度。 我已经在 GitHub 上的 Leaflet 上尝试过 runanet/coomsie 的解决方案,但我的市场没有任何反应...

回答 5 投票 0

如何隐藏/禁用 safari 的 ::marker 伪元素

我有一个问题。我无法隐藏 Safari 的 :: 标记。 #categories-4.widget_categories::marker { 内容:''!重要; } 例如,它适用于 Chrome 或 Microsoft Edge。感谢您的帮助。

回答 5 投票 0

图像平面中的ArUco标记坐标

使用 OpenCV v3.1,我检测到 ArUco 标记,并使用 aruco::estimatePoseSingleMarkers(角点、markerLength、camMatrix、distCoeffs、rvecs、tvecs); 我可以获得旋转和平移向量......

回答 1 投票 0

仅显示一个标记反应贴图 gl

我正在使用react-map-gl并声明,当单击标记时,popupOpen设置为true并显示弹出窗口。 这适用于只有一个标记的地图,但当我使用地图功能......

回答 2 投票 0

带有反应传单的自定义标记图标

我尝试了在网络、Stackoverflow 和 Github 上找到的所有内容,但仍然无法成功。 我想用自定义图标制作自定义标记,但是使用下面的代码我总是收到错误:'TypeE...

回答 8 投票 0

Fatal Exception: java.lang.ArrayIndexOutOfBoundsException at com.google maps.api.android.lib6.gmm6.vector.ct [repicate] (重复)

Fatal Exception: java.lang.ArrayIndexOutOfBoundsException: length=1; index=12 at com.google.maps.api.android.lib6.gmm6.vector.ct. + 9(:com.google.android.gms......。

回答 1 投票 -1

xsl:fo retrieve-marker not valid child.

我需要对我的xsl:fo进行转换,并在此基础上对其进行修改。 但我不知道这是否可能,因为我使用FOP处理器进行转换。如果我使用

回答 2 投票 2

在Python中Plotly - 改变标记颜色

我想根据数值来改变标记的颜色,所以我试了这个代码: import plotly.express as px import pandas as pd rows=[[['501-600','15','122.58333','45.36667'],['til 500','4','12.5','27......]。

回答 1 投票 0

在拖放标记时,在qt qml中拖动标记时留下鼠标光标,速度更快。

我想拖动一个MapQuickItem,这个MapQuickItem是在组件中声明的,并从地图中获取实时坐标,我可以成功拖动组件,但我拖动MapQuickItem时,鼠标光标快速离开了MapQuickItem。

回答 1 投票 0

未使用PHP和MYSQL显示标记群集

我已从Google Map API文档中复制了此代码(将MySQL和PHP与Google Maps结合使用)。标记正在显示,但是我无法使标记聚类工作。我有数千个标记...

回答 1 投票 -1

标记在qt qml中更快地拖动标记时离开鼠标光标>>

我想拖动一个在组件内部声明的MapQuickItem并从地图获取实时坐标。我能够成功拖动组件,但是我拖动MapQuickItem快速鼠标光标离开...

回答 1 投票 0

将标记从集群中排除在Android上的Google Maps Android API实用程序库之外?

我正在使用Google Maps Android实用程序库在ClusterManager中添加对象/标记,但是我想排除/添加一些不在Cluster中的标记。我可以使用...

回答 1 投票 3

我该如何在开放的街道地图上添加标记,而无需提及纬度

我所拥有的代码仅在代码中提到了经久的那些区域上显示地图,并且标记会弹出,但是对于我的Web应用程序,我希望用户触摸任意区域和一个...

回答 1 投票 0

如何绘制标记?就像使用画布的Google地图中的标记

我需要使用画布绘制自定义标记,到目前为止,我绘制了逆三角形形状。您对如何绘制标记形状有任何想法吗? DrawTriangle类扩展了CustomPainter {Paint ...

回答 1 投票 0

BitmapDescriptor.fromBytes()尝试在Google地图上显示自定义标记时不起作用

我正在尝试将自定义图像显示为Google地图上的标记。问题是BitmapDescriptor.fromAssetImage()工作正常,但BitmapDescriptor.fromBytes()无法工作。因为我必须使用画布...

回答 1 投票 0

情节:如何在散点图中自定义标签?

在下面的代码中,我有标记标签,这些标记现在靠近这些标记。在标记与其标签之间进行自定义目标的方法是什么?我想将标签放得更远...

回答 1 投票 1

© www.soinside.com 2019 - 2024. All rights reserved.