问题描述
限时送ChatGPT账号..我正在使用 google API 和 IGN API(法国地图)开发自己的地图,我想添加一个 Google 地图搜索框,但即使仔细阅读了 Google Map API,也找不到成功的方法.
I'm developing my own map with google API and IGN API (french map) and I'd like to add a Google Map Search Box but can't find a way to succeed even after reading carefully the Google Map API.
这是我所拥有的:http://www.tiphainebuccino/site/Map/LaCarteAuxTresors_2.html
这是我想要添加的(不丢失我的实际设置):https://developers.google/maps/文档/javascript/examples/places-searchbox?hl=fr
This is what I want to add (without losing my actual settings): https://developers.google/maps/documentation/javascript/examples/places-searchbox?hl=fr
我不明白如何混合这两个 html 代码.有人可以帮助我吗?我使用 html+javascript.
I don't understand how to mix the two html codes. Someone could help me? I work in html+javascript.
相关(非工作)代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>La Tarte Aux Crésors "Beta"</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google/maps/api/js?sensor=false"></script>
<script type="text/javascript">
"use strict";
var ignKey = "ljozkgwvms60dtumhx67z6u3"
function makeIGNMapType(layer, name, maxZoom) {
return new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://gpp3-wxs.ign.fr/" + ignKey + "/geoportail/wmts?LAYER=" +
layer +
"&EXCEPTIONS=text/xml&FORMAT=image/jpeg&SERVICE=WMTS&VERSION=1.0.0" +
"&REQUEST=GetTile&STYLE=normal&TILEMATRIXSET=PM&TILEMATRIX=" +
zoom + "&TILEROW=" + coord.y + "&TILECOL=" + coord.x;
},
tileSize: new google.maps.Size(256,256),
name: name,
maxZoom: maxZoom
});
}
function initialize() {
var map_canvas = document.getElementById("map_canvas");
var map = new google.maps.Map(map_canvas, {
mapTypeId: 'IGN',
scaleControl: true,
streetViewControl: true,
panControl: true,
mapTypeControl:true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeControlOptions: {
mapTypeIds: [
'IGN', 'IGNScanExpress',
google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
center: new google.maps.LatLng(47, 3),
zoom: 6,
draggableCursor: "crosshair"
});
map.mapTypes.set('IGN', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS", "IGN", 18));
map.mapTypes.set('IGNScanExpress', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE", "IGN Scan Express", 16));
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
推荐答案
我在 你的地图:
Uncaught TypeError: Cannot read property 'SearchBox' of undefined
您需要在加载 API 时包括地点库.
You need to include the places library when you load the API.
变化:
<script type="text/javascript" src="http://maps.google/maps/api/js?sensor=false"></script>
致:
<script type="text/javascript" src="http://maps.google/maps/api/js?libraries=places&sensor=false"></script>
您的页面上也没有带有 id="pac-input" 的元素.将此添加到您的 HTML 标记中:
You also don't have an element with id="pac-input" on your page. Add this to your HTML markup:
<input id="pac-input"></input>
工作示例
代码片段(带有月亮图块的原件不再可用):
code snippet (with moon tiles as the originals are no longer available):
var ignKey = "ljozkgwvms60dtumhx67z6u3"
var markers = [];
function makeIGNMapType(layer, name, maxZoom) {
return new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return null;
}
var bound = Math.pow(2, zoom);
return 'http://mw1.google/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
'/' + zoom + '/' + normalizedCoord.x + '/' +
(bound - normalizedCoord.y - 1) + '.jpg';
},
name: 'Moon',
tileSize: new google.maps.Size(256, 256),
maxZoom: 9,
minZoom: 0
});
}
function initialize() {
var map_canvas = document.getElementById("map_canvas");
var map = new google.maps.Map(map_canvas, {
mapTypeId: 'IGN',
scaleControl: true,
streetViewControl: true,
panControl: true,
mapTypeControl: true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeControlOptions: {
mapTypeIds: [
'IGN', 'IGNScanExpress',
google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP
],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
center: new google.maps.LatLng(47, 3),
zoom: 6,
draggableCursor: "crosshair"
});
map.mapTypes.set('IGN', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS", "IGN", 18));
map.mapTypes.set('IGNScanExpress', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE", "IGN Scan Express", 16));
// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */ (
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */
(input));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
var place = null;
var viewport = null;
for (var i = 0; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
viewport = place.geometry.viewport;
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.setCenter(bounds.getCenter());
});
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;
// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
var tileRange = 1 << zoom;
// don't repeat across y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
// repeat across x-axis
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {
x: x,
y: y
};
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
<script type="text/javascript" src="http://maps.google/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<input id="pac-input" />
这篇关于如何将 GoogleMap 搜索框添加到我的自定义地图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论