一个文件中的简单折线和标记

分类：编程问答

如何解决一个文件中的简单折线和标记

我正在尝试创建一个静态 html 页面，该页面显示步行轨迹的折线以及沿途城镇的标记。我一直在使用 Google Maps API 站点提供的 html 示例文件。我有两个数组（一个用于折线，一个用于标记）。我可以创建一个示例文件来显示折线和一个示例文件来显示标记。

---------- 这里是折线示例--------

<script>
  "use strict";
  function initMap() {
    const map = new google.maps.Map(document.getElementById("map"),{
      zoom: 10,center: {
        lat: 43.3473702427,lng: -1.7866905872
      },mapTypeId: "terrain"
    });
    const flightPlanCoordinates = [

{
         lat: 43.3473702427,lng: -1.7866905872
 },{
         lat: 43.3473476954,lng: -1.7865623441
 },{
         lat: 43.3473729249,lng: -1.7862672172
 },{
         lat: 43.3474351186,lng: -1.7861244734
 },{
         lat: 43.3474754356,lng: -1.7859851662
 },{
         lat: 43.347496558,lng: -1.7858726811
 },{
         lat: 43.3475023415,lng: -1.7857427616
 },{
         lat: 43.3474533912,lng: -1.7856312823
 },{
         lat: 43.3467171248,lng: -1.7854733672
 },{
         lat: 43.3458278049,lng: -1.7851600517
 },{
         lat: 43.3450604416,lng: -1.7848521005
 },{
         lat: 43.3443607204,lng: -1.7850081716
 },{
         lat: 43.3441632427,lng: -1.7851468921
 },{
         lat: 43.3423870336,lng: -1.7862907704
 },{
         lat: 43.3423038851,lng: -1.7863221187
 },{
         lat: 43.3422126062,lng: -1.7863554787
 },{
         lat: 43.3421186451,lng: -1.7864152417
 },{
         lat: 43.3419943415,lng: -1.786458157
 },{
         lat: 43.341907924,lng: -1.7864865717
 },{
         lat: 43.3418141305,lng: -1.7864960432
 },{
         lat: 43.3395636734,lng: -1.7880662251
 },{
         lat: 43.3394773398,lng: -1.7880819831
 },{
         lat: 43.3393750805,lng: -1.7881052848
 },{
         lat: 43.3393117134,lng: -1.7881597672
 },{
         lat: 43.3392953686,lng: -1.7882843222
 },{
         lat: 43.3392989729,lng: -1.78845305
 },{
         lat: 43.3393396251,lng: -1.788651282
 },{
         lat: 43.3393413853,lng: -1.7887586541
 },{
         lat: 43.3393360209,lng: -1.7888663616
 },{
         lat: 43.3393474203,lng: -1.7890360951
 },{
         lat: 43.3393621724,lng: -1.7891617399
 },{
         lat: 43.3393969573,lng: -1.7892939225
 },{
         lat: 43.3394075185,lng: -1.7894147895
 },{
         lat: 43.3393995557,lng: -1.7894981895
 },{
         lat: 43.3400335629,lng: -1.7926760204
 },{
         lat: 43.3403750416,lng: -1.7943606991
 },{
         lat: 43.3404274285,lng: -1.794564547
 },{
         lat: 43.3405581024,lng: -1.7947906069
 },{
         lat: 43.3408577554,lng: -1.7962014489
 },{
         lat: 43.3409312647,lng: -1.7964569293
 },{
         lat: 43.3410289977,lng: -1.7968221288
 },{
         lat: 43.341086749,lng: -1.797145335
 },{
         lat: 43.3411341906,lng: -1.7975875642
 },{
         lat: 43.341227565,lng: -1.7978497501
 },{
         lat: 43.3414114639,lng: -1.7980664223
 },{
         lat: 43.3415769227,lng: -1.7981714476
 },{
         lat: 43.3416830376,lng: -1.7983020376
 },{
         lat: 43.3418867178,lng: -1.7984791473
 },{
         lat: 43.3423764724,lng: -1.7990746815
 },{
         lat: 43.3427510597,lng: -1.7992604245
 },{
         lat: 43.3428710885,lng: -1.7993480153
 },{
         lat: 43.3431115653,lng: -1.7995948624
 },{
         lat: 43.3436958678,lng: -1.8000118621
 },{
         lat: 43.34389125,lng: -1.800135579
 },{
         lat: 43.3441171423,lng: -1.8003076594
 },{
         lat: 43.3442825172,lng: -1.8004375789
 },{
         lat: 43.3444631472,lng: -1.8005764671
 },{
         lat: 43.3446667437,lng: -1.8007254135
 },{
         lat: 43.3448162768,lng: -1.8008333724
 },{
         lat: 43.3448740281,lng: -1.8008811492
 },];
    const flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,geodesic: true,strokeColor: "#FF0000",strokeOpacity: 1.0,strokeWeight: 2
    });
    flightPath.setMap(map);
  }
</script>

//------- 结束折线示例 -----

//------- 开始标记示例 -----

<script>
let map;

      "use strict";
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"),{
          zoom: 10,center: {
            lat: 43.3062762022,lng: -2.7221442573
          },mapTypeId: "terrain"
        });
        const iconBase =
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/";
        const icons = {
          parking: {
            icon: iconBase + "parking_lot_maps.png",},library: {
            icon: iconBase + "library_maps.png",info: {
            icon: iconBase + "info-i_maps.png",};
        const features = [
      
          {
            position: new google.maps.LatLng(
              43.3062762022,-2.7221442573
            ),type: "parking",{
            position: new google.maps.LatLng(
             43.279026635,-2.3127149418
            ),];

        // Create markers.
        for (let i = 0; i < features.length; i++) {
          const marker = new google.maps.Marker({
            position: features[i].position,icon: icons[features[i].type].icon,map: map,});
        }
      }
      
</script>
*/

解决方法

仅创建一次地图。然后将折线和标记添加到该地图。

enter image description here

代码片段：

"use strict";

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"),{
    zoom: 9,center: {
      lat: 43.3473702427,lng: -1.7866905872
    },mapTypeId: "terrain"
  });
  const flightPlanCoordinates = [

    {
      lat: 43.3473702427,{
      lat: 43.3473476954,lng: -1.7865623441
    },{
      lat: 43.3473729249,lng: -1.7862672172
    },{
      lat: 43.3474351186,lng: -1.7861244734
    },{
      lat: 43.3474754356,lng: -1.7859851662
    },{
      lat: 43.347496558,lng: -1.7858726811
    },{
      lat: 43.3475023415,lng: -1.7857427616
    },{
      lat: 43.3474533912,lng: -1.7856312823
    },{
      lat: 43.3467171248,lng: -1.7854733672
    },{
      lat: 43.3458278049,lng: -1.7851600517
    },{
      lat: 43.3450604416,lng: -1.7848521005
    },{
      lat: 43.3443607204,lng: -1.7850081716
    },{
      lat: 43.3441632427,lng: -1.7851468921
    },{
      lat: 43.3423870336,lng: -1.7862907704
    },{
      lat: 43.3423038851,lng: -1.7863221187
    },{
      lat: 43.3422126062,lng: -1.7863554787
    },{
      lat: 43.3421186451,lng: -1.7864152417
    },{
      lat: 43.3419943415,lng: -1.786458157
    },{
      lat: 43.341907924,lng: -1.7864865717
    },{
      lat: 43.3418141305,lng: -1.7864960432
    },{
      lat: 43.3395636734,lng: -1.7880662251
    },{
      lat: 43.3394773398,lng: -1.7880819831
    },{
      lat: 43.3393750805,lng: -1.7881052848
    },{
      lat: 43.3393117134,lng: -1.7881597672
    },{
      lat: 43.3392953686,lng: -1.7882843222
    },{
      lat: 43.3392989729,lng: -1.78845305
    },{
      lat: 43.3393396251,lng: -1.788651282
    },{
      lat: 43.3393413853,lng: -1.7887586541
    },{
      lat: 43.3393360209,lng: -1.7888663616
    },{
      lat: 43.3393474203,lng: -1.7890360951
    },{
      lat: 43.3393621724,lng: -1.7891617399
    },{
      lat: 43.3393969573,lng: -1.7892939225
    },{
      lat: 43.3394075185,lng: -1.7894147895
    },{
      lat: 43.3393995557,lng: -1.7894981895
    },{
      lat: 43.3400335629,lng: -1.7926760204
    },{
      lat: 43.3403750416,lng: -1.7943606991
    },{
      lat: 43.3404274285,lng: -1.794564547
    },{
      lat: 43.3405581024,lng: -1.7947906069
    },{
      lat: 43.3408577554,lng: -1.7962014489
    },{
      lat: 43.3409312647,lng: -1.7964569293
    },{
      lat: 43.3410289977,lng: -1.7968221288
    },{
      lat: 43.341086749,lng: -1.797145335
    },{
      lat: 43.3411341906,lng: -1.7975875642
    },{
      lat: 43.341227565,lng: -1.7978497501
    },{
      lat: 43.3414114639,lng: -1.7980664223
    },{
      lat: 43.3415769227,lng: -1.7981714476
    },{
      lat: 43.3416830376,lng: -1.7983020376
    },{
      lat: 43.3418867178,lng: -1.7984791473
    },{
      lat: 43.3423764724,lng: -1.7990746815
    },{
      lat: 43.3427510597,lng: -1.7992604245
    },{
      lat: 43.3428710885,lng: -1.7993480153
    },{
      lat: 43.3431115653,lng: -1.7995948624
    },{
      lat: 43.3436958678,lng: -1.8000118621
    },{
      lat: 43.34389125,lng: -1.800135579
    },{
      lat: 43.3441171423,lng: -1.8003076594
    },{
      lat: 43.3442825172,lng: -1.8004375789
    },{
      lat: 43.3444631472,lng: -1.8005764671
    },{
      lat: 43.3446667437,lng: -1.8007254135
    },{
      lat: 43.3448162768,lng: -1.8008333724
    },{
      lat: 43.3448740281,lng: -1.8008811492
    },];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,geodesic: true,strokeColor: "#FF0000",strokeOpacity: 1.0,strokeWeight: 2
  });
  flightPath.setMap(map);
  const iconBase =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/";
  const icons = {
    parking: {
      icon: iconBase + "parking_lot_maps.png",},library: {
      icon: iconBase + "library_maps.png",info: {
      icon: iconBase + "info-i_maps.png",};
  const features = [
    {
      position: new google.maps.LatLng(
        43.3062762022,-2.7221442573
      ),type: "parking",{
      position: new google.maps.LatLng(
        43.279026635,-2.3127149418
      ),];

  // Create markers.
  for (let i = 0; i < features.length; i++) {
    const marker = new google.maps.Marker({
      position: features[i].position,icon: icons[features[i].type].icon,map: map,});
  }
}
/* Optional: Makes the sample page fill the window. */

html,body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async></script>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot