vue2.0/原生js使用谷歌地图并显示标记点（附两点间路径方法）_谷歌地图的js命令

图1，谷歌地图初始化并实现显示点信息

图2 ,谷歌地图实现两点间路径

图3，高德地图实现搜索显示点，可点击地图取点并获取地址，也可以搜索出来
具体文章

• 简单的实现谷歌引入
  -搜索样式

<div style="display: none">
		<input id="origin-input" class="controls" type="text"
			   placeholder="Enter an origin location">

		<input id="destination-input" class="controls" type="text"
			   placeholder="Enter a destination location">

		<div id="mode-selector" class="controls" style="display: none">
			<input type="radio" name="type" id="changemode-driving" >
			<label for="changemode-driving">Driving</label>
		</div>
	</div>
1
2
3
4
5
6
7
8
9
10
11
12

-地图样式

<div id="map" style="width: 100%;height: 500px;">
                <div class="loding" style="background: #eee;height: 500px;width: 100%;text-align: center;line-height: 500px">Loading Google map...</div>
            </div>
1
2
3

• html使用js
  –实现图1，仅使用initMap（）
  –实现图2，new AutocompleteDirectionsHandler(map);

<script type="text/javascript">
	//初始化
	function initMap() {
		var map = new google.maps.Map(document.getElementById('map'), {
			mapTypeControl: false,
			center: {lat: -43.712724, lng: 124.873256},
			zoom: 17
		});
			var infowindow = new google.maps.InfoWindow();
			var service = new google.maps.places.PlacesService(map);
			var request = {
				placeId: '地点id,可以写固定的也可以自动找',
				fields: ['name', 'formatted_address', 'place_id', 'geometry']
			};
			// service.getDetails(request, function(place, status) {
			// 	if (status === google.maps.places.PlacesServiceStatus.OK) {
					var marker = new google.maps.Marker({
						map: map,
						position: new google.maps.LatLng(-43.712724, 124.873256)
					});
					google.maps.event.addListener(marker, 'click', function() {
						infowindow.setContent('<div>' +
								"17 Silicon Pl, Tullamarine VIC 3043, Australia" + '</div>');
						infowindow.open(map, this);
					});
				// }
			// });

		new AutocompleteDirectionsHandler(map);
	}

	/**
	 * @constructor
	 */
	function AutocompleteDirectionsHandler(map) {
		this.map = map;
		this.originPlaceId = null;
		this.destinationPlaceId = null;
		this.travelMode = 'WALKING';
		this.directionsService = new google.maps.DirectionsService;
		this.directionsRenderer = new google.maps.DirectionsRenderer;
		this.directionsRenderer.setMap(map);

		var originInput = document.getElementById('origin-input');
		var destinationInput = document.getElementById('destination-input');
		var modeSelector = document.getElementById('mode-selector');

		var originAutocomplete = new google.maps.places.Autocomplete(originInput);
		// Specify just the place data fields that you need.
		originAutocomplete.setFields(['place_id']);

		var destinationAutocomplete =new google.maps.places.Autocomplete(destinationInput);
		// Specify just the place data fields that you need.
		destinationAutocomplete.setFields(['place_id']);

		// this.setupClickListener('changemode-walking', 'WALKING');
		// this.setupClickListener('changemode-transit', 'TRANSIT');
		this.setupClickListener('changemode-driving', 'DRIVING');

		this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
		this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');

		this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
		this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
		this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
	}

	// Sets a listener on a radio button to change the filter type on Places
	// Autocomplete.
	AutocompleteDirectionsHandler.prototype.setupClickListener = function(
			id, mode) {
		var radioButton = document.getElementById(id);
		var me = this;

		radioButton.addEventListener('click', function() {
			me.travelMode = mode;
			me.route();
		});
	};

	AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
			autocomplete, mode) {
		var me = this;
		autocomplete.bindTo('bounds', this.map);

		autocomplete.addListener('place_changed', function() {
			var place = autocomplete.getPlace();

			if (!place.place_id) {
				window.alert('Please select an option from the dropdown list.');
				return;
			}
			if (mode === 'ORIG') {
				me.originPlaceId = place.place_id;
			} else {
				me.destinationPlaceId = place.place_id;
			}
			me.route();
		});
	};

	AutocompleteDirectionsHandler.prototype.route = function() {
		if (!this.originPlaceId || !this.destinationPlaceId) {
			return;
		}
		var me = this;

		this.directionsService.route(
				{
					origin: {'placeId': this.originPlaceId},
					destination: {'placeId': this.destinationPlaceId},
					travelMode: this.travelMode
				},
				function(response, status) {
					if (status === 'OK') {
						me.directionsRenderer.setDirections(response);
					} else {
						window.alert('Directions request failed due to ' + status);
					}
				});
	};
	function loadScript() {
		var script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=你的钥匙&libraries=places&language=en-ww&' +
				'callback=initMap';
		$('.loading').remove()
		document.body.appendChild(script);
	}
	window.onload = loadScript;

</script>
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

• 使用vue实现图1，图2
  -html的head里加入

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=你的钥匙&libraries=places&language=en-ww"></script>

1
2

vue页面里，使用mounted引入initMap（）后再引入AutocompleteDirectionsHandler。

国外版是需要地图底图是英文的，搜索结果也是英文的，且海外国家地址都可拿到（高德获取不到国外的地址，逆向地理编码不支持国外经纬度转换），准备拿谷歌实现