使用google map API获取经纬度

当年在做毕设的时候一个功能是在地图上点击,然后获取对应的地区的经纬度,然后用来追踪该地区发布的tweets

效果

  • 鼠标左键点击在地图上增加标记,并显示经纬度信息
  • 鼠标右键取消地图标记
  • 关闭模态框后,地图上所有标记点的经纬度信息都会出现在文本框中

首先让大家看看效果


获取API key

要使用google map API,那么需要获取API key,才能使用,获取的地址为:get API key

在获取完之后,将下面的YOUKEY改为你的API key,引入需要的js文件

<script src="https://maps.googleapis.com/maps/api/js?key=YOUKEY"type="text/javascript"></script>

 

核心代码

需要:

  • Bootstrap
  • JQuery
  • Google MAP的JS(就是上面那行代码)

下面是前端页面

<button class="btn btn-primary" data-toggle="modal" data-target="#google_maps_api">点击获取经纬度坐标</button>
<textarea class="form-control" id="locationText" rows="2" style="width:500px"></textarea>

<div class="modal fade" id="google_maps_api" tabindex="-1" role="dialog"
	 aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close"data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">选取locations</h4>
			</div>
			<div class="modal-body">
				<div id="map_canvas" style="width: 100%; height: 450px"></div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">OK</button>
			</div>
		</div>
	</div>
</div>
<script src="./googleMap.js"></script>
<script>
$("#google_maps_api").on("shown.bs.modal", function () {
	googleMap.initialize();
   // googleMap.maps.event.trigger(map, "resize");
}).on('hide.bs.modal', function () { //关闭模态框
	var res = '';
	for (var i in googleMap.markers)
		res += '(' + googleMap.markers[i].geo + '),';

	res = res.substring(0,res.length-1);
	$("#locationText").val(res);
});
</script>

./googleMap.js文件如下:

var googleMap = {
    map: null,
    markers: {},
    currentId: 0,

    uniqueId: function () {
        return ++this.currentId;
    },

    infowindow: new google.maps.InfoWindow({
        size: new google.maps.Size(150, 50)
    }),

    initialize: function () {
        if (this.map) return null;

        var myOptions = {
            zoom: 3,//放大的倍数
            center: new google.maps.LatLng(34, 103),//初始化时地图的中心
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        this.map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

        google.maps.event.addListener(this.map, 'click', function () {
            googleMap.infowindow.close();
        });

        google.maps.event.addListener(this.map, 'click', function (event) {//点击时出现的提示窗口,这里显示经纬度
            var Latitude = event.latLng.lat().toFixed(2);
            var longitude = event.latLng.lng().toFixed(2);
            googleMap.addMarker(event.latLng, "name", "Location
" +Latitude +","+ longitude, Latitude +","+ longitude); }); //google.maps.event.addListener(this.map, 'click', function (event) { // console.log("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng()); //}); }, addMarker: function (Gpoint, name, contentString, geo) {//添加地图上的标记 var id = this.uniqueId(); // get new id marker = new google.maps.Marker({ id: id, position: Gpoint, geo : geo, map: googleMap.map, draggable: true, animation: google.maps.Animation.DROP }); google.maps.event.addListener(marker, 'click', function () {//添加标记 googleMap.infowindow.setPosition(this.position); googleMap.infowindow.setContent(contentString); googleMap.infowindow.open(googleMap.map, marker); }); google.maps.event.trigger(marker, 'click'); googleMap.map.panTo(Gpoint); this.markers[id] = marker; google.maps.event.addListener(marker, "rightclick", function (point) {//右键取消地图标记 googleMap.delMarker(this.id) }); }, delMarker: function (id) {//删除标记 this.markers[id].setMap(null); delete this.markers[id]; } };

 

本博客若无特殊说明则由 hrwhisper 原创发布
转载请点名出处:细语呢喃 > 使用google map API获取经纬度
本文地址:https://www.hrwhisper.me/use-google-map-api-get-latitude-and-longitude/

打赏一杯咖啡钱呗

OtherCodes, WEB前端 . permalink.

One thought on “使用google map API获取经纬度

Leave a Reply

Your email address will not be published. Required fields are marked *