google-maps - 如何用谷歌地图构建这个产品?
问题描述
我想建立一个具有不同地标指向的网站的精确副本。
你能告诉我我应该学习什么才能做到这一点吗?
到目前为止,我已经创建了这个,但不知道下一步该做什么:
https://jsfiddle.net/hasnain721/01v7s2m4/6/
顺便说一句,我是一个非常基本的编码员!
提前致谢!
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.3478, -6.2597),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow({
map: map
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
//infoWindow.setPosition(pos);
// infoWindow.setContent('<b>You are here.</b><br><b>Lat:</b> '+position.coords.latitude+'<br><b>Lon:</b> '+position.coords.longitude);
map.setCenter(pos);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: String(pos.lat) + ", " + String(pos.lng),
});
//draws out the path from current location to landmark
var flightPlanCoordinates = [{
lat: position.coords.latitude,
lng: position.coords.longitude
},
{
lat: 21.4224779,
lng: 39.8251832
}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
//draws out the path from current location to landmark
},
function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
解决方案
您需要更改“flightPlanCoordinates”变量的坐标。
指向自由女神像的样本:
var flightPlanCoordinates = [
{lat: position.coords.latitude, lng: position.coords.longitude},
{lat: 40.689249, lng: -74.0445}
];
推荐阅读
- python - Python海龟图像放置
- python - 有没有一种方法可以在一个图中创建堆叠图,或者在一个图中使用带有 matplot/seaborn 的堆叠 Y 轴创建线?
- wordpress - cURL 函数在 WordPress 5.2.4 上停止工作?
- apache-kafka - 如何轮询 kafka 以获取时间戳小于 30 秒的消息?
- c# - 有没有办法在输入代码时忽略 Rider 中某些建议的智能感知命名空间?
- node.js - 节点异步/等待递归函数结束代码执行
- java - 是否可以在范围报告等步骤之间有诱惑报告的屏幕截图?
- r - 将数据框的结构从垂直方式更改为水平方式
- cors - 在 Nuxt.js 中请求奇怪的行为
- reactjs - 如何在 AppRegistry registerComponent 中传递道具反应原生