自己收藏的高德地图批量标点获取坐标工具

直接上代码!!!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>地图经纬度描点工具</title>
<!--
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2">deng</script>
-->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=9dff644dd853bd6eeebc598847b5683c&plugin=AMap.Autocomplete"></script>

</head>
<body>
<div style="width:80%;height:650px;border:1px solid gray" id="container"></div>

<div style="right:10px;top:8px;position: absolute;width:18%; height: 650px;border:1px solid gray">
    <p>
        &nbsp;手动:<input id="startBtn" type="button" οnclick="startTool();" value="开启取点工具" />
    </p>

    <p>
        &nbsp;搜索:<input type="input" name="addr"  id="addr" />
        <input type="button" οnclick="getBoundary()" value="搜索" />
    </p>
    

    <hr>
    <p style="padding: 0 5px;">
        <span>经纬度:</span><input type="button" οnclick="map.clearMap();document.getElementById('info').innerHTML = '';points=[];" value="清除" />
        <textarea id="info" style="width:94%;margin:2px;max-height: 980px;min-height: 440px;overflow-y:scroll;" readonly="readonly"></textarea>
    </p>
</div>

</body>
</html>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue2中使用高德地图进行坐标标点,你可以按照以下步骤进行操作: 1. 首先,在你的HTML文件中导入高德地图的API。你可以使用以下代码: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> ``` 确保将`您申请的key值`替换为你在高德地图开发者平台申请的API密钥。 2. 在Vue组件中导入`coordinateMap.vue`组件。你可以使用以下代码: ```javascript import CoordinateMap from '@/components/coordinateMap.vue' ``` 确保路径正确,根据你的项目结构进行相应的调整。 3. 注册`CoordinateMap`组件。在Vue组件的`components`选项中添加以下代码: ```javascript components: { CoordinateMap } ``` 4. 在Vue组件中使用`CoordinateMap`组件。在模板中添加以下代码: ```html <CoordinateMap @giveLnglat="getLnglat"></CoordinateMap> ``` `@giveLnglat`是一个自定义事件,用于从`CoordinateMap`组件中获取用户当前点击位置的经纬度。`getLnglat`是你在Vue组件中定义的方法,用于处理获取到的经纬度数据。 5. 在Vue组件中定义`getLnglat`方法。在Vue组件的方法中添加以下代码: ```javascript methods: { getLnglat(lnglat) { console.log(lnglat) } } ``` 这个方法将获取到的经纬度数据作为参数,并在控制台中打印出来。你可以根据需要对经纬度数据进行进一步处理或使用。 通过以上步骤,你就可以在Vue2中使用高德地图进行坐标标点了。记得替换相关的API密钥和路径,根据你的具体需求进行适当的修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [基于Vue结合高德地图api做的一个坐标拾取组件](https://blog.csdn.net/qq_37131884/article/details/104071925)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值