我的 google 地点 kml url javascript
My google places kml url javascript
我在 google 地图上的位置有问题,我的 https 服务器中已经有一个带有文件 kml 的功能地图,但我不想每次都下载和上传地图进行更改,不适合我只嵌入我需要使用 API 进行操作,所以这是我的代码:
var map;
var src = 'MY_SERVER/points_vl.kmz';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(20.63736, -105.22883),
zoom: 2,
});
loadKmlLayer(src, map);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = 'http://www.nearby.org.uk/google/circle.kml.php?radius=5miles&lat='+position.coords.latitude+'&long='+position.coords.longitude;
loadKmlLayer(circle, map);
map.setCenter(pos);
setTimeout(function(){
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Current Location'
});
infowindow.setPosition(pos);
}, 2000);
});
}
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
这项工作很好,但是有办法直接从我的 url 个地图位置 google 中获取 kml 吗?
Using an existant Google 'My Places' map with Maps API v3 styling 这个线程有一些想法,但行不通,如果你知道如何制作它会很精彩
转到您的 "MyMap" 地图。单击地图名称旁边的三个点,单击 "Export to KML":
选择“使数据与网络保持同步 link KML(仅可在线使用):
将 .kmz 文件重命名为 .zip,然后打开它并打开其中包含的 doc.kml 文件。该文件将直接 link 指向指定您的 "MyMap".
的 KML 数据
中使用 link
代码片段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://www.google.com/maps/d/kml?mid=1-mpfnFjp1e5JJ1YkSBjE6ZX_d9w',
map: map
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<!-- add your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
我在 google 地图上的位置有问题,我的 https 服务器中已经有一个带有文件 kml 的功能地图,但我不想每次都下载和上传地图进行更改,不适合我只嵌入我需要使用 API 进行操作,所以这是我的代码:
var map;
var src = 'MY_SERVER/points_vl.kmz';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(20.63736, -105.22883),
zoom: 2,
});
loadKmlLayer(src, map);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = 'http://www.nearby.org.uk/google/circle.kml.php?radius=5miles&lat='+position.coords.latitude+'&long='+position.coords.longitude;
loadKmlLayer(circle, map);
map.setCenter(pos);
setTimeout(function(){
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Current Location'
});
infowindow.setPosition(pos);
}, 2000);
});
}
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
这项工作很好,但是有办法直接从我的 url 个地图位置 google 中获取 kml 吗?
Using an existant Google 'My Places' map with Maps API v3 styling 这个线程有一些想法,但行不通,如果你知道如何制作它会很精彩
转到您的 "MyMap" 地图。单击地图名称旁边的三个点,单击 "Export to KML":
选择“使数据与网络保持同步 link KML(仅可在线使用):
将 .kmz 文件重命名为 .zip,然后打开它并打开其中包含的 doc.kml 文件。该文件将直接 link 指向指定您的 "MyMap".
的 KML 数据 中使用 link代码片段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'https://www.google.com/maps/d/kml?mid=1-mpfnFjp1e5JJ1YkSBjE6ZX_d9w',
map: map
});
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map"></div>
<!-- add your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>