Javascript 谷歌地图_Javascript_Jquery_Reactjs_Google Maps

Javascript 谷歌地图

javascript jquery reactjs google-maps

Javascript 谷歌地图,javascript,jquery,reactjs,google-maps,Javascript,Jquery,Reactjs,Google Maps,我有一个代码，它根据缩放级别将地图上的标记列表显示在右侧。例如：假设地图上总共有5个标记，如果我现在放大地图上只有2个标记，那么它只在右边列出2个东西，如果我缩小地图，那么假设有3个标记，那么列出3个东西。因此，当我放大和缩小地图上标记的数量时，列表也会改变，但是代码是用javascript+jquery编写的，但我正在使用reactjs，我只是reactjs的初学者。所以请帮帮我这就是代码。。。。 HTML: JS+JQUERY： // Keep references var map,

我有一个代码，它根据缩放级别将地图上的标记列表显示在右侧。例如：假设地图上总共有5个标记，如果我现在放大地图上只有2个标记，那么它只在右边列出2个东西，如果我缩小地图，那么假设有3个标记，那么列出3个东西。因此，当我放大和缩小地图上标记的数量时，列表也会改变，但是代码是用javascript+jquery编写的，但我正在使用reactjs，我只是reactjs的初学者。所以请帮帮我

这就是代码。。。。 HTML:

JS+JQUERY：

// Keep references
var map,
    markers = [];

// Our markers database (for testing)
var locations = [
    ['Bondi Beach', -33.890542, 151.274856],
    ['Coogee Beach', -33.923036, 151.259052],
    ['Cronulla Beach', -34.028249, 151.157507],
    ['Manly Beach', -33.80010128657071, 151.28747820854187],
    ['Maroubra Beach', -33.950198, 151.259302]
];


function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-33.9, 151.2),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };    
    
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    
    // Adding our markers from our "big database"
    addMarkers();
    
    // Fired when the map becomes idle after panning or zooming.
    google.maps.event.addListener(map, 'idle', function() {
        showVisibleMarkers();
    });
}

function addMarkers() {
    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i],
            myLatLng = new google.maps.LatLng(beach[1], beach[2]),
            marker = new google.maps.Marker({
                position: myLatLng,
                title: beach[0]
            });         
        marker.setMap(map); 
        
        // Keep marker instances in a global array
        markers.push(marker);
    }
}

function showVisibleMarkers() {
    var bounds = map.getBounds(),
        count = 0;
                                   
    for (var i = 0; i < markers.length; i++) {
        var marker = markers[i],
            infoPanel = $('.info-' + (i+1) ); // array indexes start at zero, but not our class names :)
                                           
        if(bounds.contains(marker.getPosition())===true) {
            infoPanel.show();
            count++;
        }
        else {
            infoPanel.hide();
        }
    }
    
    $('#infos h2 span').html(count);
}

google.maps.event.addDomListener(window, 'load', initialize);

//保留引用
var映射，
标记=[]；
//我们的标记数据库（用于测试）
变量位置=[
[Bondi Beach'，-33.890542151.274856]，
[Coogee Beach'，-33.923036151.259052]，
['Cronulla Beach'，-34.028249151.157507]，
[‘曼利海滩’，-33.80010128657071151.28747820854187]，
[‘马鲁布拉海滩’，-33.950198151.259302]
];
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（-33.9151.2），
缩放：9，
mapTypeId:google.maps.mapTypeId.ROADMAP
};    
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
//从“大数据库”中添加标记
添加标记（）；
//在平移或缩放后贴图变为空闲时激发。
google.maps.event.addListener（映射'idle'，函数（）{
showVisibleMarkers（）；
});
}
函数addMarkers（）{
对于（变量i=0；i

有许多包/插件可用于加载Maps JS API。但我建议动态加载它，而不是依赖拥有自己文档的第三方库。那样的话，你就可以只关注谷歌的官方地图文档了

以下是一个样本供您参考：

App.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Map from './components/map';
import "./style.css";

class App extends Component {
 
  render() {
    return (
       <Map 
        id="myMap"
        options={{
          center: { lat: -33.8569, lng: 151.2152 },
          zoom: 8
        }}
      />
    );
  }
}

export default App;

h1, p {
  font-family: Lato;
}

.map {
  height:500px;
  width:100%
}

import React, { Component } from "react";
import { render } from "react-dom";

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map: ""
    };
  }

  onScriptLoad() {
    this.state.map = new window.google.maps.Map(
      document.getElementById(this.props.id),
      this.props.options
    );

    var marker = new window.google.maps.Marker({
      position: { lat: -33.8569, lng: 151.2152 },
      map: this.state.map,
      title: "Hello Sydney!"
    });

    //adding markers by click
    this.state.map.addListener("click", e => {
      //Determine the location where the user has clicked.
      this.addMarker(e.latLng);
    });
  }

  componentDidMount() {
    if (!window.google) {
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
      var x = document.getElementsByTagName("script")[0];
      x.parentNode.insertBefore(s, x);
      s.addEventListener("load", e => {
        this.onScriptLoad();
      });
    } else {
      this.onScriptLoad();
    }
  }

  addMarker(latLng) {
    var marker = new google.maps.Marker({
      position: latLng,
      map: this.state.map
    });
  }

  render() {
    return <div className="map" id={this.props.id} />;
  }
}

export default Map;

map.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Map from './components/map';
import "./style.css";

class App extends Component {
 
  render() {
    return (
       <Map 
        id="myMap"
        options={{
          center: { lat: -33.8569, lng: 151.2152 },
          zoom: 8
        }}
      />
    );
  }
}

export default App;

h1, p {
  font-family: Lato;
}

.map {
  height:500px;
  width:100%
}

import React, { Component } from "react";
import { render } from "react-dom";

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map: ""
    };
  }

  onScriptLoad() {
    this.state.map = new window.google.maps.Map(
      document.getElementById(this.props.id),
      this.props.options
    );

    var marker = new window.google.maps.Marker({
      position: { lat: -33.8569, lng: 151.2152 },
      map: this.state.map,
      title: "Hello Sydney!"
    });

    //adding markers by click
    this.state.map.addListener("click", e => {
      //Determine the location where the user has clicked.
      this.addMarker(e.latLng);
    });
  }

  componentDidMount() {
    if (!window.google) {
      var s = document.createElement("script");
      s.type = "text/javascript";
      s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
      var x = document.getElementsByTagName("script")[0];
      x.parentNode.insertBefore(s, x);
      s.addEventListener("load", e => {
        this.onScriptLoad();
      });
    } else {
      this.onScriptLoad();
    }
  }

  addMarker(latLng) {
    var marker = new google.maps.Marker({
      position: latLng,
      map: this.state.map
    });
  }

  render() {
    return <div className="map" id={this.props.id} />;
  }
}

export default Map;

import React，{Component}来自“React”；
从“react dom”导入{render}；
类映射扩展组件{
建造师（道具）{
超级（道具）；
此.state={
地图：“
};
}
onScriptLoad（）{
this.state.map=new window.google.maps.map(
document.getElementById（this.props.id），
这个。道具。选项
);
var marker=new window.google.maps.marker({
位置：{lat:-33.8569，lng:151.2152}，
地图：this.state.map，
标题：“你好，悉尼！”
});
//通过单击添加标记
this.state.map.addListener（“单击”，e=>{
//确定用户单击的位置。
本.添加标记（如latLng）；
});
}
componentDidMount（）{
如果（！window.google）{
var s=document.createElement（“脚本”）；
s、 type=“text/javascript”；
s、 src=`https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
var x=document.getElementsByTagName（“脚本”）[0]；
x、 parentNode.insertBefore（s，x）；
s、 addEventListener（“加载”，e=>{
这是一个.onScriptLoad（）；
});
}否则{
这是一个.onScriptLoad（）；
}
}
添加标记（板条）{
var marker=new google.maps.marker({
位置：latLng，
地图：this.state.map
});
}
render（）{
返回；
}
}
导出默认地图；

问题出在哪里？我在你的问题中看不到任何问题。问题是我有javascript和jQuery中的上述代码…我想要reactjs中的代码，所以请你帮助我