gmap使用教程（地图标记、导航、搜索功能详解）

介绍

gmap是谷歌地图的一个应用程序接口（API），可以在网站上嵌入谷歌地图，并添加自定义标记、导航和搜索功能。使用gmap可以为用户提供更加方便和实用的地图服务。

准备工作

在使用gmap之前，需要进行一些准备工作：

1. 在谷歌开发者平台（https://console.developers.google.com/）上创建一个项目，并启用Google Maps JavaScript API。

2. 获取API密钥，用于在网站上使用gmap。

地图标记

添加地图

首先，在网站中添加一个地图。在HTML文件中添加以下代码：

“`

“`

然后，在JavaScript文件中添加以下代码：

“`

function initMap() {

var map = new google.maps.Map(document.getElementById(‘map’), {

center: {lat: 37.7749, lng: -122.4194},

zoom: 8

});

}

“`

这段代码会创建一个地图，并将其显示在网页上。其中，center属性指定地图的中心点，zoom属性指定地图的缩放级别。

添加标记

接着，可以在地图上添加标记。在JavaScript文件中添加以下代码：

“`

function initMap() {

var map = new google.maps.Map(document.getElementById(‘map’), {

center: {lat: 37.7749, lng: -122.4194},

zoom: 8

});

var marker = new google.maps.Marker({

position: {lat: 37.7749, lng: -122.4194},

map: map,

title: ‘San Francisco’

});

}

“`

这段代码会在地图上添加一个标记，并在标记上显示一个标题。其中，position属性指定标记的位置，map属性指定标记所在的地图。

导航

添加导航按钮

在HTML文件中添加以下代码：

“`

Get Directions

“`

这段代码会添加一个按钮，用于触发导航功能。

添加导航功能

在JavaScript文件中添加以下代码：

“`

function initMap() {

var map = new google.maps.Map(document.getElementById(‘map’), {

center: {lat: 37.7749, lng: -122.4194},

zoom: 8

});

var marker = new google.maps.Marker({

position: {lat: 37.7749, lng: -122.4194},

map: map,

title: ‘San Francisco’

});

var directionsService = new google.maps.DirectionsService();

var directionsRenderer = new google.maps.DirectionsRenderer();

directionsRenderer.setMap(map);

document.getElementById(‘directions’).addEventListener(‘click’, function() {

var request = {

origin: {lat: 37.7749, lng: -122.4194},

destination: {lat: 37.3382, lng: -121.8863},

travelMode: ‘DRIVING’

};

directionsService.route(request, function(result, status) {

if (status == ‘OK’) {

directionsRenderer.setDirections(result);

}

});

});

}

“`

这段代码会添加一个导航功能，并在按钮被点击时触发导航。其中，origin属性指定起点，destination属性指定终点，travelMode属性指定导航方式。

搜索功能

添加搜索框

在HTML文件中添加以下代码：

“`

Search

“`

这段代码会添加一个搜索框和一个搜索按钮。

添加搜索功能

在JavaScript文件中添加以下代码：

“`

function initMap() {

var map = new google.maps.Map(document.getElementById(‘map’), {

center: {lat: 37.7749, lng: -122.4194},

zoom: 8

});

var marker = new google.maps.Marker({

position: {lat: 37.7749, lng: -122.4194},

map: map,

title: ‘San Francisco’

});

var directionsService = new google.maps.DirectionsService();

var directionsRenderer = new google.maps.DirectionsRenderer();

directionsRenderer.setMap(map);

var searchBox = new google.maps.places.SearchBox(document.getElementById(‘search’));

document.getElementById(‘searchButton’).addEventListener(‘click’, function() {

var places = searchBox.getPlaces();

if (places.length == 0) {

return;

}

var bounds = new google.maps.LatLngBounds();

places.forEach(function(place) {

if (!place.geometry) {

return;

}

var marker = new google.maps.Marker({

map: map,

position: place.geometry.location

});

if (place.geometry.viewport) {

bounds.union(place.geometry.viewport);

} else {

bounds.extend(place.geometry.location);

}

});

map.fitBounds(bounds);

});

}

“`

这段代码会添加一个搜索功能，并在搜索按钮被点击时触发搜索。其中，SearchBox对象用于创建一个搜索框，getPlaces()方法用于获取搜索结果，LatLngBounds对象用于设置地图的边界。