Google 使用地点 ID 在地图上添加标记
Google Map add marker using place ID
我正在尝试使用其 PlaceID 将标记放置到 Google 地图中。我有地图工作和显示,还可以在其中添加标记(使用纬度和经度)。
The code below is what I am using to try and make the marker display
using its placeID however it is not displaying.
function addPlaces(){
var marker = new google.maps.Marker({
place: new google.maps.Place('ChIJN1t_tDeuEmsRUsoyG83frY4'),
map: map
});
}
地图加载后调用此函数。
google.maps.event.addDomListener(window, "load", addPlaces);
如果你想在地图上 place_id: 'ChIJN1t_tDeuEmsRUsoyG83frY4' 的地方放置一个标记,你需要做一个 getDetails request to the PlaceService
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
}, function (result, status) {
var marker = new google.maps.Marker({
map: map,
place: {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
location: result.geometry.location
}
});
});
代码片段:
var map;
var infoWindow;
var service;
function initialize() {
var mapOptions = {
zoom: 19,
center: new google.maps.LatLng(51.257195, 3.716563)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
}, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
var marker = new google.maps.Marker({
map: map,
position: result.geometry.location
});
var address = result.adr_address;
var newAddr = address.split("</span>,");
infoWindow.setContent(result.name + "<br>" + newAddr[0] + "<br>" + newAddr[1] + "<br>" + newAddr[2]);
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
我正在尝试使用其 PlaceID 将标记放置到 Google 地图中。我有地图工作和显示,还可以在其中添加标记(使用纬度和经度)。
The code below is what I am using to try and make the marker display using its placeID however it is not displaying.
function addPlaces(){
var marker = new google.maps.Marker({
place: new google.maps.Place('ChIJN1t_tDeuEmsRUsoyG83frY4'),
map: map
});
}
地图加载后调用此函数。
google.maps.event.addDomListener(window, "load", addPlaces);
如果你想在地图上 place_id: 'ChIJN1t_tDeuEmsRUsoyG83frY4' 的地方放置一个标记,你需要做一个 getDetails request to the PlaceService
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
}, function (result, status) {
var marker = new google.maps.Marker({
map: map,
place: {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
location: result.geometry.location
}
});
});
代码片段:
var map;
var infoWindow;
var service;
function initialize() {
var mapOptions = {
zoom: 19,
center: new google.maps.LatLng(51.257195, 3.716563)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
infoWindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
}, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
var marker = new google.maps.Marker({
map: map,
position: result.geometry.location
});
var address = result.adr_address;
var newAddr = address.split("</span>,");
infoWindow.setContent(result.name + "<br>" + newAddr[0] + "<br>" + newAddr[1] + "<br>" + newAddr[2]);
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>