百度地图-根据地址获取经纬度

iatkotworld

已于 2022-08-19 17:59:34 修改

阅读量1.5k

点赞数

分类专栏：百度地图 javascript angularJS 文章标签：百度 angular.js javascript

于 2022-08-19 17:54:52 首次发布

本文链接：https://blog.csdn.net/weixin_40400844/article/details/126429259

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

百度地图

3 篇文章 0 订阅

订阅专栏

angularJS

2 篇文章 0 订阅

订阅专栏

百度地图-根据地址获取经纬度

Javascript
angularJs

Javascript

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>根据地址获取经纬度</title>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
		<style>
			.anchorBL {
			  display:none;
			}
		</style>
	</head>
	<body>
		<div class="box" style="width: 700px; margin: 150px auto;">
			<input type="text" style="margin-bottom: 20px;"
				placeholder="请输入查询地址" id="addr">
			<button onclick="getpoint()">获取经纬度</button>
			<div id="map" style="width: 100%; height: 500px;"></div>
			<div id="latlng"></div>
		</div>
	</body>
	<script>
		const map = new BMap.Map('map');
		map.centerAndZoom('北京', 15)
		map.enableScrollWheelZoom(); // 启用滚轮放大缩小，默认禁用
		map.enableContinuousZoom(); // 启用地图惯性拖拽，默认禁用
		const localSearch = new BMap.LocalSearch(map);
		localSearch.enableAutoViewport(); // 允许自动调节窗体大小
		function getpoint () {
			const val = document.getElementById('addr').value;
			localSearch.setSearchCompleteCallback(function(res) {
				map.clearOverlays(); // 清空原来的标注
				const poi = res.getPoi(0);
				map.centerAndZoom(poi.point, 15);
				// 创建标注，为要查询的地方对应的经纬度
				const marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));
				map.addOverlay(marker);
				const latlng = document.getElementById('latlng');
				latlng.innerHTML = `经度：${poi.point.lng}，纬度：${poi.point.lat}`;
			});
			localSearch.search(val);
		}
	</script>
</html>

angularJs

引入百度地图api：
注意：需在index.html文件中进行引用

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

创建map组件文件夹及三个文件如下：
html文件：

<div class="main-content">
  <div id="map"></div>
</div>

css文件：

.main-content {
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}
.anchorBL {
  display: none;
}

ts文件：

import { Component, OnInit, AfterViewInit, Input, OnChanges } from '@angular/core';
import { NzMessageService } from "ng-zorro-antd";
declare var BMap: any;
@Component({
  selector: 'my-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css'],
})
export class mapComponent implements OnInit, AfterViewInit, OnChanges {
  constructor(
    private _message: NzMessageService
  ) { }
  @Input() addr: any;
  map = null; //创建地图实例
  ngOnInit(): void {
    this.map = new BMap.Map('map');
    const point = new BMap.Point(116.404, 39.915); // 创建点坐标
    this.map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
    this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  }
  ngAfterViewInit() {
    setTimeout(() => { }, 10);
  }
  ngOnChanges() {
    const that = this;
    if (this.map) {
      const maps = this.map;
      const localSearch = new BMap.LocalSearch(maps);
      localSearch.enableAutoViewport(); //允许自动调节窗体大小
      maps.clearOverlays(); //清空原来的标注
      localSearch.setSearchCompleteCallback(function(searchResult) {
        const poi = searchResult.getPoi(0);
        if (poi) {
          maps.centerAndZoom(poi.point, 15);
          // 创建标注，为要查询的地方对应的经纬度
          const marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));
          maps.addOverlay(marker);
        } else {
          that._message.warning('无法定位');
        }
      });
      localSearch.search(this.addr);
    }
  }
}

因为对angular语言不熟悉，为防止误导，此处省略组件注册步骤；
在html中引入使用：

<my-map style="height: 500px; width:700px;" [addr]="addr"></my-map>

addr = ''; // 完整地址，用于地图标点
setAddr() {
    console.log('baidu-map');
    this.addr = this.inputVal; // 此处为输入地址位置
}

iatkotworld

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
百度地图-根据地址获取经纬度

根据输入的地址获取经纬度信息并在地图上进行标点
复制链接

扫一扫

专栏目录

百度地图-根据地址获取经纬度

百度地图-根据地址获取经纬度

Javascript

angularJs

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