当年在做毕设的时候一个功能是在地图上点击，然后获取对应的地区的经纬度，然后用来追踪该地区发布的tweets
效果
- 鼠标左键点击在地图上增加标记，并显示经纬度信息
- 鼠标右键取消地图标记
- 关闭模态框后，地图上所有标记点的经纬度信息都会出现在文本框中
首先让大家看看效果 点击获取经纬度坐标 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112{% raw %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDRk0h7XH8hieXFGV4N-yi89lkZUd9u4AE"type="text/javascript"></script>
<button class="btn btn-primary" data-toggle="modal" data-target="#google_maps_api">点击获取经纬度坐标</button>
<div id="google_maps_api" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-hidden="true">×</button>
<div id="myModalLabel" class="modal-title">选取locations</div>
</div>
<div class="modal-body">
<div id="map_canvas" style="width: 100%; height: 450px;"></div>
</div>
<div class="modal-footer"><button class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">OK</button></div>
</div>
</div>
</div>
<script>
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: 2,
center: new google.maps.LatLng(43, 0),
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", "<b>Location</b><br>" +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)
});
//var res = '';
//for (i in googleMap.markers){
// res += googleMap.markers[i].geo + ',';
//}
//res = res.substring(0,res.length-1)
//console.log(res);
},
delMarker: function (id) {
this.markers[id].setMap(null);
delete this.markers[id];
}
};
</script>
<script>
jQuery(document).ready(function($) {
$("#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>
{% endraw %}
获取API key
要使用google map API，那么需要获取API key，才能使用，获取的地址为：get API key
在获取完之后，将下面的YOUKEY改为你的API key，引入需要的js文件
1 | <script src="https://maps.googleapis.com/maps/api/js?key=YOUKEY"type="text/javascript"></script> |
核心代码
需要：
- Bootstrap
- JQuery
- Google MAP的JS（就是上面那行代码）
下面是前端页面
1 | <button class="btn btn-primary" data-toggle="modal" data-target="#google_maps_api">点击获取经纬度坐标</button> |
./googleMap.js文件如下：
1 | var googleMap = { |
