第三方通过坐标跳转到百度地图并标记坐标点

官方文档 :http://lbsyun.baidu.com/index.php?title=uri/api/web

API http://api.map.baidu.com/marker?location=40.047669,116.313082&title=故障位置&output=html&src=webapp.baidu.openAPIdemo

实例
//应用场景 项目内创建百度地图显示坐标,点击地图后,打开新页面显示该坐标

项目内图片
新页面中效果

源码
		let point =new BMap.Point(latitude,longitude)
		let map = new BMap.Map('malfunctionMap'); // 创建Map实例 new BMapGL.Point(116.404, 39.915)
		map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别
		map.enableScrollWheelZoom(true)
		map.disableDragging();
		let marker1 = new BMap.Marker(point)
		map.addOverlay(marker1)
		let location = v.longitude+ ',' +  v.latitude
		map.addEventListener('click', function (e) {
		   //跳转方式->打开新页面
			window.open(`http://api.map.baidu.com/marker?location=${location}&title=故障位置&content=详细坐标&output=html&src=webapp.baidu.openAPIdemo`)
		
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用ECharts绘制武安市的地图并标记坐标非常简单。以下是一个简单的步骤指南: 1. 首先,确保你已经引入了ECharts库的JavaScript文件。 2. 创建一个div元素,用于容纳地图。 ```html <div id="map" style="width: 800px; height: 600px;"></div> ``` 3. 在JavaScript文件中,使用echarts.init方法初始化地图,并设置图表的宽度和高度。 ```javascript var myChart = echarts.init(document.getElementById('map')); ``` 4. 定义地图的配置项,包括地图类型和数据。 ```javascript var option = { tooltip: { trigger: 'item', formatter: '{b}' }, series: [ { name: '武安市', type: 'map', mapType: '武安市', roam: false, label: { show: true, position: 'inside' }, data: [] // 在这里填入你的数据 } ] }; ``` 5. 使用echarts.registerMap方法注册地图。 ```javascript echarts.registerMap('武安市', 武安市的地图数据); ``` 6. 将配置项应用到图表中。 ```javascript myChart.setOption(option); ``` 7. 若要标记坐标,可以在数据项中添加坐标的地理位置信息。 ```javascript data: [ {name: '坐标1', value: [经度, 纬度]}, {name: '坐标2', value: [经度, 纬度]}, // ... ] ``` 8. 最后要根据数据项中的坐标进行标记。 ```javascript series: [ { name: '武安市', type: 'map', mapType: '武安市', roam: false, label: { show: true, position: 'inside' }, data: [ {name: '坐标1', value: [经度, 纬度]}, {name: '坐标2', value: [经度, 纬度]}, // ... ], markPoint: { symbolSize: 10, label: { show: false }, itemStyle: { color: 'red' }, data: [ {name: '坐标1', value: [经度, 纬度]}, {name: '坐标2', value: [经度, 纬度]}, // ... ] } } ] ``` 以上就是使用ECharts绘制武安市的地图并标记坐标的基本步骤。你可以根据实际需要修改配置项和数据。希望对你有帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值