AMap.Marker style

AMap.Marker是高德地图API中用于创建标记的类。你可以使用它来在地图上添加自定义的标记，并设置标记的样式。下面是一个示例代码，展示了如何使用AMap.Marker来设置标记的样式： ```javascript // 创建地图对象 var map = new AMap.Map('app', { zoom: 10, center: [116.397428, 39.90923] }); // 创建标记对象 var marker = new AMap.Marker({ position: [116.397428, 39.90923], // 标记的位置 icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 标记的图标 offset: new AMap.Pixel(-13, -30), // 图标的偏移量 title: '这是一个标记', // 标记的标题 label: { content: '标记', offset: new AMap.Pixel(0, 20) // 标题的偏移量 }, zIndex: 100 // 标记的层级 }); // 将标记添加到地图上 map.add(marker); ``` 在上面的代码中，我们首先创建了一个地图对象，并指定了地图的缩放级别和中心点。然后，我们创建了一个标记对象，并设置了标记的位置、图标、偏移量、标题、标签内容和偏移量以及层级。最后，我们将标记添加到地图上。

for (var i = 0; i < this.lnglats.length; i++) { var marker = new AMap.Marker({ position: [this.lnglats[i].jwd.split(',')[0], this.lnglats[i].jwd.split(',')[ 1]], map: map, zoom: 11, }); marker.setLabel({ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量 content: this.lnglats[i].xxqc, //设置文本标注内容 direction: 'top', style: { color: 'red', // 设置文本颜色 fontSize: '12px' // 设置文本大小 } }); marker.orderno = '123456'; marker.on('click', markerClick); } function markerClick(e) { console.log(e) console.log(e.orderno) // console.log(e.target.content) infoWindow.setContent(e.target.content); infoWindow.open(map, e.target.getPosition()); // this.isNone = !this.isNone // console.log(this.isNone) // this.$refs.popup.open('bottom') that.confirmDialog() }为什么打印不出来orderno

在上述代码中，您在创建marker对象后，将orderno属性添加到marker对象中。然后，在markerClick函数中，通过e.target获取到点击的marker对象，再通过e.target.orderno来获取orderno属性的值。根据您提供的代码，如果无法打印出orderno属性的值，可能是因为e.target并不是您创建的marker对象。这可能是由于事件处理函数中的作用域问题导致的。您可以尝试使用闭包来解决这个问题。在循环中创建一个立即执行的函数，将marker作为参数传递给该函数，并在函数内部处理点击事件。示例代码如下： ```javascript for (var i = 0; i < this.lnglats.length; i++) { (function(marker) { marker.setLabel({ offset: new AMap.Pixel(0, 0), content: marker.content, direction: 'top', style: { color: 'red', fontSize: '12px' } }); marker.orderno = '123456'; marker.on('click', function(e) { console.log(e.target.orderno); // 其他操作 }); })(new AMap.Marker({ position: [this.lnglats[i].jwd.split(',')[0], this.lnglats[i].jwd.split(',')[1]], map: map, zoom: 11 })); } ``` 在上述代码中，我们将marker作为参数传递给立即执行的函数，并在该函数内部处理点击事件。这样可以确保每个marker对象都有自己独立的作用域，可以正确访问到orderno属性的值。请注意，我也根据您的代码做了一些修改，将content属性改为了marker.content，以确保正确设置文本标注的内容。

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>可拖拽的路线规划</title> <style> html, body, #container { width: 100%; height: 100%; } </style> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script> </head> <body> <div id="container"></div> <div id="tip">请拖拽路径试试</div> <script type="text/javascript"> var map, route, marker; //基本地图加载 map = new AMap.Map("container", { resizeEnable: true }); //绘制初始路径 var path = []; path.push([116.303843, 39.983412]); path.push([116.321354, 39.896436]); path.push([116.407012, 39.992093]); map.plugin("AMap.DragRoute", function() { route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类 route.search(); //查询导航路径并开启拖拽导航 }); </script> </body> </html>，这段代码复制粘贴出来运行没有线路

这段代码是高德地图的可拖拽路径规划示例代码，如果你复制粘贴出来运行没有线路，可能是因为你没有填写你的高德地图 API Key。你需要将代码中的 `您申请的key值` 替换成你自己申请的高德地图 API Key，例如： ```html <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY_HERE"></script> ``` 另外，这段代码中的初始路径是三个点，如果你想修改成其他路径，需要修改代码中的 `path` 变量，例如： ```javascript var path = []; path.push([116.397428, 39.90923]); // 北京市中心点 path.push([116.434307, 39.90809]); // 北京大学 path.push([116.348975, 39.936222]); // 798艺术区 ``` 希望以上解答对你有所帮助！

阅读全文

相关推荐

构图用mapmarker

vue 使用高德地图vue-amap组件过程解析

Vue 引入AMap高德地图的实现代码

接着上个问题，把js引入html中，如何创建地图new AMap.Map在.vue文件中显示

marker.setLabel({ offset: new AMap.Pixel(0, 0), content: "152367ftyff", direction: 'top', // 设置文本标注的样式 style: { color: 'red', // 设置文本颜色 fontSize: '12px' // 设置文本大小 } });设置后字体还是黑色的

marker.setLabel({ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量 content: "152367ftyff", //设置文本标注内容 direction: 'top' //设置文本标注方位 })怎么设置文本颜色和大小

amap_demo:高德地图使用初级教程

<script setup lang="ts"> import { createApp } from 'vue' import App from './App.vue' import AMap from 'vue3-amap' const app = createApp(App) app.use(AMap) 完善代码使可在当前.vue文件中呈现在地图上显示实时位置

marker.setLabel的样式属性

vue使用vue高德地图点击地图,获取经纬度和详细地址高德地图点击地图,获取经纬度和详细地址@amap/amap-jsapi-loader

js高得定位AMap的

AMap 怎么添加json数据

import VueAMap from "vue-amap"; app.use(VueAMap); app.mount('#app') 已导入相应插件,请在.vue文件中写一个引用此插件并在此页面呈现效果的案例

vue-amap H5搜索地址定位

vue3中，amap上的点聚合

大家在看

新项目基于YOLOv8的人员溺水检测告警监控系统python源码(精确度高)+模型+评估指标曲线+精美GUI界面.zip

Handbook of PI and PID Controller Tuning Rules 3e

中国AI安防行业：Ambarella业绩反映AI需求强劲.zip

0065-极智AI-解读T4上商汤OpenPPL vs TensorRT7 vs TensorRT8性能对比修正-个人笔记

hanlp 自然语言处理入门

最新推荐

vue 使用高德地图vue-amap组件过程解析

STM32之光敏电阻模拟路灯自动开关灯代码固件

PowerShell控制WVD录像机技术应用

管理建模和仿真的文件

Honeywell打印机驱动提升秘诀：从基础到高级配置的全方位解析

Python输入三个数 a,b,c。判断能否以它们为三个边长构成直角三角形。若能，输出 YES，否则 输出NO。

探索杂货店后端技术与JavaScript应用

"互动学习：行动中的多样性与论文攻读经历"

【松下伺服故障预防与维护手册】：从报警代码中提炼出的维护要诀

编写一个类实现模拟汽车的功能

Python输入三个数 a,b,c。判断能否以它们为三个边长构成直角三角形。若能，输出 YES，否则输出NO。