前言
这里先放一下注册google map api key的链接(我是链接),没有注册的小伙伴可以去注册一下,google map需要用到。
另外必须有一VPN,不然地图会加载不出来
正文
首先创建一个angular4+的程序,
ng new googlemapdemo
这个就很简单不单独说了,然后在生成的文件中找到index.html,添加引入文件
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyMapsProject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
// 这个两个css文件是引用样式,省事可以不要
<link rel="stylesheet" href="assets//css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fontsomeawe/css/font-awesome.min.css">
// 这个是google map必须引用的,而且是网络访问的
// key是你申请的api key 没有的话可以直接把Key这个参数删掉也能正常使用
// v=3.31是版本,可以不要
// libraries=places这个比较重要,不能去掉
<script
src="https://maps.googleapis.com/maps/api/js?key=你申请的key&libraries=places&v=3.31">
</script>
// 习惯用jq和bootstarp的可以引用
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
然后创建一个新的组件
ng g compnent searchbox
在serchbox.ts中添加,里面有详细的注释,不再多描述
import { Component, OnInit, AfterViewInit } from '@angular/core';
declare const $: any;
declare const google: any;
@Component({
selector: 'app-searchbox',
templateUrl: './searchbox.component.html',
styleUrls: ['./searchbox.component.css']
})
export class SearchboxComponent implements OnInit,AfterViewInit {
constructor() { }
ngOnInit() {
}
private map;
ngAfterViewInit() {
const that = this;
// 初始化map,添加定位,放大比例,显示样式的参数
that.map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 34.61392284366256, lng: 112.4535423212591},
zoom: 15,
mapTypeId: 'roadmap'
});
// 定位代码 , 可以定位当前位置
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
const marker = new google.maps.Marker({
position: pos,
});
marker.setMap(that.map);
that.map.setCenter(pos);
});
}
// 关联搜索框和map的关系
let input = document.getElementById('pac-input');
let searchBox = new google.maps.places.SearchBox(input);
const floattop = document.getElementById('floattop');
that.map.controls[google.maps.ControlPosition.TOP_CENTER ].push(floattop);
// 当可视范围修改时触发
that.map.addListener('bounds_changed', function() {
// 设置搜索范围为当前视窗范围
searchBox.setBounds(that.map.getBounds());
});
let markers = [];
// 当搜索地点变换时触发
searchBox.addListener('places_changed', function() {
searchboxchange();
});
function searchboxchange(){
let places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// 设置搜索区域。。。括号里什么都没有应该是全局
let bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
if (!place.geometry) {
console.log('Returned place contains no geometry');
return;
}
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: that.map,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
that.map.fitBounds(bounds);
}
}
}
同时添加searcbox.html内容
<div id=floattop>
<input id="pac-input" class="controls form-control" type="text" placeholder="Search Box">
</div>
<div id="map"></div>
添加searchbox.css样式
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 500px;
width: 100%
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
将<app-searchbox></app-searchbox>添加到app.component.html里面,然后运行就可以了!
结果如下所示
最后
注册使用版的API KEY经常有问题,有能力的小伙伴还是购买一个比较好